从谷歌地图帮助中删除标记 - JavaScript

Deleting markers from a google map help - JavaScript

本文关键字：JavaScript 删除 谷歌地图 帮助      更新时间：2023-09-26

当用户按下按钮时，我正在尝试从地图中删除所有标记，这听起来应该非常简单，所以我可能错过了一些非常愚蠢的东西。

我有一个全局数组将它们全部存储在：

var markersArray = [];

然后，我将所有标记添加到地图中，并将它们推送到数组中：

var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(lat, lng),
        title: description,
        icon: image,
        shadow: shadow,
        shape: shape
    });
  markersArray.push(marker);

最后，我声明了一个函数，该函数应该从数组中删除所有标记：

google.maps.Map.prototype.deleteOverlays = function() {
if (markersArray.length) {
    var i;
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
    markersArray.length = 0;
  }
}

然而，这根本不起作用，经过无数小时的摆弄，我完全迷失了。我哪里出错了？

感谢您抽出宝贵时间:)

你的数组迭代器是错误的（而且效率低下）。
您正在循环访问数组的属性，而不是元素。

请参阅下面的修改代码：

google.maps.Map.prototype.deleteOverlays = function() {
if (markersArray.length) {
    for (var i = 0, end = markersArray.length; i < end; i++) {
      markersArray[i].setMap(null);
    }
    markersArray = new Array(); //like Scorpion-Prince said
  }
}

我这样做没有任何问题，而且效率也很高：

clearMarkers = function(){
    var marker;
    while( marker = markers.pop() ){
        marker.setMap(null);
    }
};
在

for 循环之后将 maps.marker 设置为空数组，以通过添加以下行来清除标记：

this.markers = new Array();

或

this.markers = [];
<</div> div class="answers">

我把一个独立的页面放在一起，只对标记选项（未知引用）进行更改。关键部分似乎是调用删除的位置。它必须能够引用映射变量。 map.deleteOverlays();

这是JS小提琴和代码：

http://jsfiddle.net/VUfEy/

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      var map;
      var markersArray = [];
      var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP };
      function initialize() {
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        google.maps.event.addListener(map, 'click', function(e) {
          addMarker(e.latLng);
        });
        document.getElementById("delete").onclick = function() { 
          map.deleteOverlays(); 
        };
      }
      function addMarker(latLng) {
       var marker = new google.maps.Marker({
        map: map,
        //position: new google.maps.LatLng(lat, lng),
        //title: description,
        //icon: image,
        //shadow: shadow,
        //shape: shape
        position: latLng
       });
       markersArray.push(marker);
      }
      google.maps.Map.prototype.deleteOverlays = function() {
       if (markersArray.length) {
        var i;
        for (i in markersArray) {
          markersArray[i].setMap(null);
        }
        markersArray.length = 0;
       }
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <button id="delete">delete overlays</button>
    <div id="map_canvas"></div>
  </body>
</html>
相关文章：