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>

地图在body中如下所示。

<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;
}
}

- tamak

---

为什么不直接将现有的标记移动到新位置呢？无需删除和重新创建。 - Marcelo

可能是重复问题：Google Maps API v3：如何删除所有标记？ - Touchpad

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(); 
}

- Fran Mauri

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：如何删除所有标记？

- Sunil Gulabani

---

我不得不进行一些微调，但能够遵循您提供的代码，并且它正常运行。非常感谢！ - tamak

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);
  }
}

- j0j0j0