Google Maps api v3 - 在點擊事件中添加新標記之前刪除標記

Question

我使用以下代碼並試圖找出如何添加一個我可以調用的函數，它將刪除之前的標記，然后再添加一個新標記。 地圖使用onclick事件添加用戶點擊的標記...基本上我只想在任何給定時間在地圖上有一個標記。

我已經搜索並嘗試了幾乎所有的東西，但必須以某種方式做錯了...請快速瀏覽一下代碼，讓我知道它將如何實現。

太感謝了！

<script>
  function initialize() {
    var mapOptions = {
      zoom: 11,
      center: new google.maps.LatLng(document.getElementById('field_lat').value,document.getElementById('field_lng').value),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions);

    google.maps.event.addListener(map, 'click', function(e) {


        // SET MY UI SEARCH TEXT FIELDS TO THE LAT AND LNG
        document.getElementById('field_lat').value = e.latLng.lat();
        document.getElementById('field_lng').value = e.latLng.lng();


      placeMarker(e.latLng, map);
    });
  } 

  function placeMarker(position, map) {
      //Marker.setMap(null);
    var Marker = new google.maps.Marker({
         position: position,
         map: map
    });
    map.panTo(position);

    $("#listbox ul").empty();
    docall(); 
  }

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

</script>

地圖在體內如下

<div id="map_canvas" style="width: 400px; height: 400px;"></div>

我試圖讓這個或類似的東西工作，但沒有骰子......

// Deletes all markers in the array by removing references to them
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}

Answer 1

如果有，請刪除上一個標記。

var Marker;
function placeMarker(position, map) {
  if(typeof marker!= 'undefined')
      marker.setMap(null);
  var Marker = new google.maps.Marker({
     position: position,
     map: map
  });
  map.panTo(position);

  $("#listbox ul").empty();
  docall(); 
}

Answer 2

只需執行以下操作：

I.聲明一個全局變量：

var markersArray = [];

II。 定義一個函數：

function clearOverlays() {
  for (var i = 0; i < markersArray.length; i++ ) {
   markersArray[i].setMap(null);
  }
}

要么

google.maps.Map.prototype.clearOverlays = function() {
  for (var i = 0; i < markersArray.length; i++ ) {
     markersArray[i].setMap(null);
  }
}

III。 在調用以下內容之前在'markerArray'中推送標記：

markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});

IV。 在需要的地方調用該功能。

clearOverlays();

要么

map.clearOverlays(); 

而已！！

希望能幫到你。

來源： Google Maps API v3：如何刪除所有標記？

Answer 3

您可以在第一次單擊時設置標記，然后只需在后續單擊時更改位置。

var marker;

google.maps.event.addListener(map, 'click', function(event) {
   placeMarker(event.latLng);
});

function placeMarker(location) {
  if (marker == null) {
    marker = new google.maps.Marker({
          position: location,
          map: map
      });
  } else {
    marker.setPosition(location);
  }
}