谷歌地图api v3 -删除标记之前添加新的点击事件

Google Maps api v3 - remove marker before adding new one from click event

本文关键字：添加 事件 v3 api 删除 谷歌地图      更新时间：2023-09-26

我使用下面的代码，并试图找出如何添加一个函数，我可以调用，将删除之前的标记添加一个新的。地图使用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;
}
}

如果前面有标记，请删除。

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

只需做以下操作:

。声明一个全局变量:

var markersArray = [];

二世。定义一个函数:

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

第四。在需要的地方调用函数

clearOverlays();

或

map.clearOverlays();

就是这样! !

希望对你有帮助。

来源:谷歌地图API v3:如何删除所有标记?

您可以在第一次单击时设置标记，然后在后续单击时更改位置。

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);
  }
}
相关文章：