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

在谷歌地图API v2，如果我想删除所有的地图标记，我可以简单地做:

map.clearOverlays();

我如何做到这一点在谷歌地图API v3?

看看参考API，我不清楚。

当前回答

在V3中似乎还没有这样的函数。

人们建议将对地图上所有标记的引用保存在一个数组中。然后当你想把它们全部删除时，只需要在数组中循环，并对每个引用调用. setmap (null)方法。

更多信息/代码请参见这个问题。

我的版本:

google.maps.Map.prototype.markers = new Array();

google.maps.Map.prototype.getMarkers = function() {
    return this.markers
};

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i<this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

google.maps.Marker.prototype._setMap = google.maps.Marker.prototype.setMap;

google.maps.Marker.prototype.setMap = function(map) {
    if (map) {
        map.markers[map.markers.length] = this;
    }
    this._setMap(map);
}

该代码是此代码http://www.lootogo.com/googlemapsapi3/markerPlugin.html的编辑版本，我删除了手动调用addMarker的需要。

Pros

这样做可以使代码保持紧凑和在一个地方(不会污染名称空间)。你不再需要自己跟踪标记你可以通过调用map。getmarkers()找到地图上的所有标记

Cons

Using prototypes and wrappers like I did now makes my code dependent on Google code, if they make a mayor change in their source this will break. If you don't understand it then you won't be able to fix it if does break. The chances are low that they're going to change anything which will break this, but still.. If you remove one marker manually, it's reference will still be in markers array. (You could edit my setMap method to fix it, but at the cost of looping trough markers array and removing the reference)

2009-10-09 16:45:18

其他回答

google.maps.Map.prototype.markers = new Array();

google.maps.Map.prototype.addMarker = function(marker) {
    this.markers[this.markers.length] = marker;
};

google.maps.Map.prototype.getMarkers = function() {
    return this.markers
};

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i<this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

我认为V3中没有，所以我使用了上面的自定义实现。

免责声明:我没有写这段代码，但我忘记保留引用时，我合并到我的代码库，所以我不知道它来自哪里。

2009-10-09 16:45:48

你是说删除是指隐藏它们还是删除它们?

如果隐藏:

function clearMarkers() {
            setAllMap(null);
        }

如果你想删除它们:

 function deleteMarkers() {
            clearMarkers();
            markers = [];
        }

注意，我使用数组标记来跟踪它们，并手动重置它。

2015-07-15 23:10:22

解决方法很简单。你可以使用方法:marker.setMap(map);。在这里，您定义大头针将出现在哪个映射上。

所以，如果你在这个方法中设置为null (marker.setMap(null);)，大头针就会消失。

现在，你可以写一个函数女巫，而使所有的标记消失在你的地图。

您只需添加将您的大头针放入数组中并使用标记声明它们。Push (your_new pin)或以下代码为例:

// Adds a marker to the map and push to the array.
function addMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markers.push(marker);
}

这是一个可以设置或消失映射中数组的所有标记的函数:

// Sets the map on all markers in the array.
  function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
    }
  }

为了消除所有的标记，你应该调用null函数:

// Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

并且，删除和消失，你所有的标记，你应该重置你的标记数组像这样:

// Deletes all markers in the array by removing references to them.
  function deleteMarkers() {
    clearMarkers();
    markers = [];
  }

这是我的完整代码。这是我能化简的最简单的形式。请注意，你可以用你的密钥谷歌API替换代码中的YOUR_API_KEY:

<!DOCTYPE html>
<html>
  <head>
  <title>Remove Markers</title>
  <style>
     /* Always set the map height explicitly to define the size of the div
     * element that contains the map. */
     #map {
       height: 100%;
       }
  </style>
</head>
<body>

<div id="map"></div>
<p>Click on the map to add markers.</p>
<script>

  // In the following example, markers appear when the user clicks on the map.
  // The markers are stored in an array.
  // The user can then click an option to hide, show or delete the markers.
  var map;
  var markers = [];

  function initMap() {
    var haightAshbury = {lat: 37.769, lng: -122.446};

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: haightAshbury,
      mapTypeId: 'terrain'
    });

    // This event listener will call addMarker() when the map is clicked.
    map.addListener('click', function(event) {
      addMarker(event.latLng);
    });

    // Adds a marker at the center of the map.
    addMarker(haightAshbury);
  }

   // Adds a marker to the map and push to the array.
  function addMarker(location) {
    var marker = new google.maps.Marker({
      position: location,
      map: map
    });
    markers.push(marker);
  }

  // Sets the map on all markers in the array.
  function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
    }
  }

  // Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

  // Shows any markers currently in the array.
  function showMarkers() {
    setMapOnAll(map);
  }

  // Deletes all markers in the array by removing references to them.
  function deleteMarkers() {
    clearMarkers();
    markers = [];
  }

</script>
   <script async defer
    src="https://maps.googleapis.com/maps/api/js key=YOUR_API_KEY&callback=initMap">
   </script>
</body>
</html>

您可以咨询谷歌开发人员或完整的文档，也，谷歌开发人员网站。

2017-04-06 06:32:52

清空Googlemap

mGoogle_map.clear();

2017-02-03 10:55:35

同样的问题。这段代码不再工作了。

我已经纠正了它，这样改变clearMarkers方法:

set_map（空） ---> setMap（空）

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i < this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

文档已更新，包括关于主题的详细信息:https://developers.google.com/maps/documentation/javascript/markers#remove

2009-12-14 22:17:31

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

推荐文章

最新文章

标签