Question

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

我有一个全局数组来存储它们：

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

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

感谢您的时间：）

Answer 1

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

this.markers = new Array();

或

this.markers = [];

Answer 2

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

请参阅以下修改后的代码：

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

Answer 3

我整理了一个独立页面，只对标记选项进行了更改（未知参考）。关键部分似乎是调用删除的地方。它必须能够引用map变量。 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>

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

3 个答案: