Question

我在javascript中创建了gMap。

加载地图时，标记也会随地图一起加载。我想在点击加载标记按钮后加载标记。怎么做？

JS：

var geocoder = new google.maps.Geocoder();

function geocodePosition(pos) {
  geocoder.geocode({
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {

    } 
  });
}
function updateMarkerPosition(latLng) {
  document.getElementById('info').innerHTML = [
    latLng.lat(),
    latLng.lng()
  ].join(', ');
}
function initialize() {
  var latLng = new google.maps.LatLng(-29.3456, 151.4346);
  var map = new google.maps.Map(document.getElementById('mapCanvas'), {
    zoom: 8,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var marker = new google.maps.Marker({
    position: latLng,
    title: 'Position',
    map: map,
    draggable: true
  });


  updateMarkerPosition(latLng);
  geocodePosition(latLng); 
   google.maps.event.addListener(marker, 'drag', function() {

    updateMarkerPosition(marker.getPosition());
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

HTML：

<div id="info"></div>
<div id="mapCanvas"></div>
<button>Load MArker</button>

Answer 1

var geocoder = new google.maps.Geocoder();

function geocodePosition(pos) {
  geocoder.geocode({
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {

    } 
  });
}
function updateMarkerPosition(latLng) {
  document.getElementById('info').innerHTML = [
    latLng.lat(),
    latLng.lng()
  ].join(', ');
}
function initialize() {
  var latLng = new google.maps.LatLng(-29.3456, 151.4346);
  var map = new google.maps.Map(document.getElementById('mapCanvas'), {
    zoom: 8,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var marker = new google.maps.Marker({
    position: latLng,
    title: 'Position',
    map: null,   //<-- it will be created but not shown.
    draggable: true
  });


  updateMarkerPosition(latLng);
  geocodePosition(latLng); 
   google.maps.event.addListener(marker, 'drag', function() {

    updateMarkerPosition(marker.getPosition());
  });

 $('button').click(function(){
    marker.setMap(map);   //<-- assign the map, in other words .. show it.
});
}

google.maps.event.addDomListener(window, 'load', initialize);

第二个选项

var geocoder = new google.maps.Geocoder();

function geocodePosition(pos) {
  geocoder.geocode({
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {

    } 
  });
}
function updateMarkerPosition(latLng) {
  document.getElementById('info').innerHTML = [
    latLng.lat(),
    latLng.lng()
  ].join(', ');
}
function initialize() {
  var latLng = new google.maps.LatLng(-29.3456, 151.4346);
  var map = new google.maps.Map(document.getElementById('mapCanvas'), {
    zoom: 8,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var marker = new google.maps.Marker({
    position: latLng,
    title: 'Position',
    map: map,   
    draggable: true,
    visible: false   //<-- default value is true
  });


  updateMarkerPosition(latLng);
  geocodePosition(latLng); 
   google.maps.event.addListener(marker, 'drag', function() {

    updateMarkerPosition(marker.getPosition());
  });

 $('button').click(function(){
    marker.setVisible(true);   //<--  show it.
});
}

google.maps.event.addDomListener(window, 'load', initialize);

点击此处查看两种方法What is the difference between "marker.setVisible(false)" and "marker.setMap(null)" in Google Maps v3?

的区别

如何在按钮点击事件上加载标记

1 个答案: