0

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

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

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

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

感谢您的时间 ：）

4

3 回答 3

0

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

this.markers = new Array();

或者

this.markers = [];
于 2012-05-09T16:38:09.447 回答
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);
    }
};
于 2012-05-09T16:44:44.670 回答
0

我整理了一个独立页面，仅更改标记选项（未知引用）。关键部分似乎是调用删除的位置。它必须能够引用地图变量。map.deleteOverlays();

这是 JS Fiddle 和代码：

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>
于 2012-05-09T17:07:53.587 回答