Question

在Google Maps API v2中，如果我想删除所有地图标记，我可以这样做：

map.clearOverlays();

如何在Google Maps API中执行此操作 v3 ？

看Reference API，我不清楚。

Answer 1

只需执行以下操作：

予。声明一个全局变量：

var markersArray = [];

II。定义一个函数：

function clearOverlays() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
}

OR

google.maps.Map.prototype.clearOverlays = function() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
}

III。在调用以下内容之前在'markerArray'中推送标记：

markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});

IV。在需要的地方拨打clearOverlays();或map.clearOverlays();功能。

就是这样!!

Answer 2

同样的问题。此代码不再有效。

我已经纠正过了，用这种方式改变clearMarkers方法：

set_map（null）---＆gt;的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

Answer 3

似乎V3中还没有这样的功能。

人们建议在数组中保留对地图上所有标记的引用。然后当你想删除em all时，只需循环遍历数组并在每个引用上调用.setMap（null）方法。

See this question for more info/code.

我的版本：

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的需要。

赞成

这样做可以使代码保持紧凑并且在一个地方（不会污染命名空间）。
您不必再自己跟踪标记了，您可以通过调用map.getMarkers（）

缺点

像我现在一样使用原型和包装器使我的代码依赖于Google代码，如果他们在源代码中进行市长更改，这将会中断。
如果您不理解，那么如果确实破坏了，您将无法修复它。很有可能他们会改变任何会破坏这一点的东西，但仍然......
如果手动删除一个标记，它的引用仍将位于标记数组中。（您可以编辑我的setMap方法来修复它，但代价是循环标记数组并删除引用）

Answer 4

这是最初由 YingYang Mar 11＆14; 14 15：049 发布的最简单的解决方案，原始回复用户原始问题

我使用同样的解决方案2。5年后使用谷歌地图v3.18，它就像一个魅力

markersArray.push(newMarker) ;
while(markersArray.length) { markersArray.pop().setMap(null); }

// No need to clear the array after that.

Answer 5

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中没有一个，所以我使用了上面的自定义实现。

免责声明：我没有编写此代码，但是当我将其合并到我的代码库中时，我忘记保留引用，因此我不知道它来自何处。

Answer 6

在新版本v3上，他们建议保留在数组中。如下。

请参阅overlay-overview处的示例。

var map;
var markersArray = [];

function initialize() {
  var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
  var mapOptions = {
    zoom: 12,
    center: haightAshbury,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  map =  new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng);
  });
}

function addMarker(location) {
  marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markersArray.push(marker);
}

// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}

// Shows any overlays currently in the array
function showOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(map);
    }
  }
}

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

Answer 7

解决方案非常简单。您可以使用以下方法：marker.setMap(map);。在这里，您可以定义引脚将在哪个地图上显示。

因此，如果您在此方法中设置null（marker.setMap(null);），则该引脚将消失。

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

您只需添加以将您的引脚放入数组并使用markers.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 = [];
  }

这是我的完整代码。这是我可以减少的最简单的。 完全关注您可以通过关键的Google 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>

您也可以参考google developer或完整文档，google developer web site。

Answer 8

Google的Demo Gallery有一个关于他们如何做到这一点的演示：

http://code.google.com/apis/maps/documentation/javascript/examples/overlay-remove.html

您可以查看源代码以了解它们如何添加标记。

长话短说，他们将标记保存在全局数组中。清除/删除它们时，它们遍历数组并在给定的标记对象上调用“.setMap（null）”。

然而，这个例子显示了一个“技巧”。此示例的“清除”意味着将它们从地图中删除但将它们保留在数组中，这允许应用程序快速将它们重新添加到地图中。从某种意义上说，这就像“隐藏”它们一样。

“删除”也会清除数组。

Answer 9

for (i in markersArray) {
  markersArray[i].setMap(null);
}

仅适用于IE。

for (var i=0; i<markersArray.length; i++) {
  markersArray[i].setMap(null);
}

使用chrome，firefox，即......

Answer 10

您可以在此处找到如何删除标记的示例：

https://developers.google.com/maps/documentation/javascript/examples/marker-remove?hl=es

// Add 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 setAllMap(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() {
  setAllMap(null);
}

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

Answer 11

两个答案中发布的“set_map”功能似乎在Google Maps v3 API中不再有效。

我想知道发生了什么

<强>更新

Google似乎更改了API，“set_map”不是“setMap”。

http://code.google.com/apis/maps/documentation/v3/reference.html

Answer 12

我发现在google-maps-utility-library-v3项目中使用markermanager库是最简单的方法。

<强> 1。设置MarkerManager

mgr = new MarkerManager(map);
google.maps.event.addListener(mgr, 'loaded', function () {
    loadMarkers();
});

<强> 2。将标记添加到MarkerManager

function loadMarkers() {
  var marker = new google.maps.Marker({
            title: title,
            position: latlng,
            icon: icon
   });
   mgr.addMarker(marker);
   mgr.refresh();
 }

第3。要清除标记，您只需调用MarkerManger的clearMarkers()函数

即可

mgr.clearMarkers();

Answer 13

以下来自Anon的工作非常完美，但在重复清除叠加层时会出现闪烁现象。

只需执行以下操作：

<强>予。声明一个全局变量：

var markersArray = [];

<强> II。定义一个函数：

function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}

<强> III。在调用以下内容之前在'markerArray'中推送标记：

markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});

<强> IV。在需要的地方调用clearOverlays()功能。

就是这样!!

希望能帮助你。

Answer 14

你也可以这样做：

function clearMarkers(category){ 
  var i;       

  for (i = 0; i < markers.length; i++) {                          
    markers[i].setVisible(false);        
  }    
}

Answer 15

我刚用kmlLayer.setMap（null）尝试了这个并且它有效。不确定这是否适用于常规标记，但似乎可以正常工作。

Answer 16

清除所有叠加层，包括多边形，标记等......

只需使用：

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);}

这是我在地图应用程序中编写的一个函数：

  function clear_Map() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    //var chicago = new google.maps.LatLng(41.850033, -87.6500523);
    var myOptions = {
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: HamptonRoads
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}

Answer 17

最干净的方法是遍历地图的所有功能。标记（以及多边形，折线等）存储在地图的data layer中。

function removeAllMarkers() {
  map.data.forEach((feature) => {
    feature.getGeometry().getType() === 'Point' ? map.data.remove(feature) : null
  });
}

在通过drawing manager添加标记的情况下，最好创建标记的全局数组或在创建时将标记推入数据层，如下所示：

google.maps.event.addListener(drawingManager, 'overlaycomplete', (e) => {
    var newShape = e.overlay;
    newShape.type = e.type;

    if (newShape.type === 'marker') {
      var pos = newShape.getPosition()
      map.data.add({ geometry: new google.maps.Data.Point(pos) });

      // remove from drawing layer
      newShape.setMap(null);
    }
  });

我建议第二种方法，因为它允许您稍后使用其他google.maps.data类方法。

Answer 18

要从地图创建函数中删除所有标记，请执行以下操作：

1.addMarker（location）：此函数用于在地图上添加标记

2.clearMarkers（）：此函数从地图中删除所有标记，而不是从数组中删除

3.setMapOnAll（map）：此函数用于在数组中添加标记信息

4.deleteMarkers（）：此函数通过删除对它们的引用来删除数组中的所有标记。

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

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

Answer 19

这是Google自己在至少一个样本中使用的方法：

var markers = [];

// Clear out the old markers.
markers.forEach(function(marker) {
  marker.setMap(null);
});
markers = [];

检查Google示例以获取完整的代码示例：

https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

Answer 20

大多数投票表决的答案是正确的，但是如果您一次只拥有一个标记（如我当时的情况），并且每次您都需要杀死该标记的先前位置并添加一个新标记，那么您不需要创建整个标记数组并在每次按下和弹出操作时对其进行管理，您只需创建一个变量来存储标记的先前位置，并在创建新标记时将其设置为null。

//用于保存标记位置的全局变量。

var previousMarker;

//同时添加新标记

    if(previousMarker != null)
previousMarker.setMap(null);

var marker = new google.maps.Marker({map: resultsMap, position: new google.maps.LatLng(lat_, lang_)});
previousMarker = marker;

Answer 21

我已经尝试了所有提议的解决方案，但是当我的所有标记都在群集下时，没有任何对我有用。最后我把它放在：

var markerCluster = new MarkerClusterer(map, markers,
    { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' });
agentsGpsData[agentGpsData.ID].CLUSTER = markerCluster;

//this did the trick
agentsGpsData[agentId].CLUSTER.clearMarkers();

换句话说，如果您在群集中包裹标记并想要删除所有标记，请调用：

clearMarkers();

Answer 22

我使用的是能很好地完成工作的速记。只是做

    map.clear();

Answer 23

只需清除Google地图

即可

mGoogle_map.clear();

Answer 24

只需遍历标记并将其从地图中移除，之后为空地图标记数组：

var markers = map.markers;
for(var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
}
map.markers = [];

Answer 25

我不会＆＃39;知道原因，但是，当我使用setMap(null)时，将DirectionsRenderer设置为我的标记并不适用于我。

在我的情况下，我也必须拨打setMap(null)给我的DirectionsRenderer。

类似的东西：

var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();

if (map.directionsDisplay) {
    map.directionsDisplay.setMap(null);
}

map.directionsDisplay = directionsDisplay;

var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
};

directionsDisplay.setMap(map);
directionsService.route(request, function (result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(result);
    }
});

Answer 26

您需要将map null设置为该标记。

<select id="plage">
     <option>...</option>
</select>

<p id=changeplage">

<script>
$(document).ready(function(){
    $('#plage').change(function() {
        $("#changeplage").remove();

        var i;
        for(i=0;i<$(this).val();i++){
            $('form').append('From IP : ');
            $('<input name="fromip'+ (i+1) +'" type="text">').appendTo('form');

            $('form').append('To IP : ');
            $('<input name="toip'+ (i+1) +'" type="text">').appendTo('form');
        }

        $('<input type="submit" class="submit" name="send" value="Send">').appendTo('form');
    });
});
</script>

</p>

Answer 27

我找到了简单的解决方案（我认为）：

var marker = new google.maps.Marker();

function Clear(){
     marker.setMap(null);
}

Answer 28

你的意思是删除，就像隐藏它们或删除它们一样？

如果隐藏：

function clearMarkers() {
            setAllMap(null);
        }

如果你想删除它们：

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

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

Answer 29

使用此功能，您可以从地图中删除所有标记。

map.clear();

这会对你有所帮助，它对我有帮助..

Answer 30

如果您使用gmap V3插件： $("#map").gmap("removeAllMarkers");

请参阅：http://www.smashinglabs.pl/gmap/documentation#after-load

Answer 31

我知道这可能是一个简单的解决方案，但这就是我的工作

$("#map_canvas").html("");
markers = [];

每次都适合我。

Google Maps API v3：如何删除所有标记？

31 个答案: