Google Maps API v3:如何删除所有标记?


429

在Google Maps API v2中,如果我想删除所有地图标记,则可以执行以下操作:

map.clearOverlays();

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

参考API,我不清楚。


3
我在下面的链接中找到了一些代码,但圣牛-是很多代码来模拟API v2中的前1行代码。 lootogo.com/googlemapsapi3/markerPlugin.html
2009年

2
请记住,maps 3.0的含义非常轻,以便移动设备尽可能少地使用它……
Petrogad

1
从2010/07/29开始,此处建议的解决方案似乎已被破坏。我希望我有一个工作版本可以提出建议。
乔纳森·汉森

9
评分最高的答案是错误的。查看此示例的源代码以了解操作方法:google-developers.appspot.com/maps/documentation/javascript/…–
Seb Ashton

Answers:


487

只需执行以下操作:

一,声明一个全局变量:

var markersArray = [];

二。定义一个函数:

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

要么

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

三,在调用以下代码之前,将标记推入“ markerArray”中:

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

IV。在需要时调用clearOverlays();map.clearOverlays();函数。

而已!!


32
for..in与数组循环?这肯定不能好..?..请参阅:stackoverflow.com/questions/500504/…–
zack

4
另外,您可以隐藏使用marker.setVisible(假)标志物
NBK

12
尽管标记仍保留在数组中,所以它将越来越大。建议在循环后也清除数组
Ami

5
您可以始终设置markersArray为空数组而不是设置其长度,我觉得有点奇怪:markersArray = [];
hellatan

11
我会使用一个while方法来处理数组:while(markersArray.length) { markersArray.pop().setMap(null); }。之后,无需清除数组。
YingYang 2014年

84

同样的问题。此代码不再起作用。

我已经更正了,以这种方式更改clearMarkers方法:

set_map(null)---> setMap(null)

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


1
我最终使它工作的方式是遍历存储它们的markers集合并使用setMap(null)
Sebastian 2010年

4
但这是否清除了内存中的标记?我意识到JavaScript具有自动垃圾回收功能,但是当调用setMap(null)时,我们怎么知道Google的API没有保存对标记的引用?在我的应用程序中,我添加并“删除”了大量标记,而我讨厌所有那些“已删除”标记占用内存。
尼克,2010年

@Nick:添加“删除this.markers [i];” 在setMap(null)位之后。
DaveS,

4
现在,文档中已经回答了这个问题。code.google.com/apis/maps/documentation/javascript/...
lashleigh

1
谁在使用new Array();
Rihards

47

在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了。

优点

  • 这样做可以使代码紧凑且集中在一个位置(不会污染名称空间)。
  • 您不必再自己跟踪标记,您始终可以通过调用map.getMarkers()在地图上找到所有标记

缺点

  • 现在像我一样使用原型和包装器,使我的代码依赖于Google代码,如果他们在源代码中进行市长更改,则此操作将中断。
  • 如果您不理解它,则无法修复它。他们改变任何会破坏这一点的机会很小,但是仍然..
  • 如果您手动删除一个标记,则其引用仍将位于标记数组中。(您可以编辑我的setMap方法来修复它,但要以循环槽标记数组和删除引用为代价)

1
+1来自我。但是,如果您包含包装器来自动调用addMarker,您的答案会更好!
安德鲁

我认为您实际上是指安德鲁斯的答案。您会用代码显示您将做什么以及为什么。谢谢
mp_

抱歉,抱歉,我无法发布代码,因为我无法快速对其进行测试。
森花舞(Maiku Mori)2009年

谢谢Maiku。不过,我不明白-如何在您的示例中添加新标记。再次非常感谢!
mp_

1
我尝试使用setMap(null),但是我有一个自动更新的脚本,每当我将全部约50个标记设置为空地图时,我仍然在DOM中的某个地方漂浮着一堆无地图标记。这一直导致页面崩溃,因为它每30秒向DOM添加50个新标记,并且由于页面在视频墙上始终保持24/7的开放状态而不断传播。在创建新的图层之前,我不得不使用顶部的答案并从DOM中完全清除所有地图图层。希望这对某人有帮助;我花了很长时间才弄清楚为什么我的页面崩溃了!:(
InterfaceGuy

23

这原本张贴的所有解决方案中最简单的鹰扬03月11日'14在15:049到用户原来的问题原始响应下

2.5年后,我在Google Maps v3.18中使用了与他相同的解决方案,它的工作原理像一个魅力

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

// No need to clear the array after that.

21
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中没有,所以我使用了上述自定义实现。

免责声明:我没有编写此代码,但是在将其合并到我的代码库中时忘记了保留引用,所以我不知道它来自哪里。


从我+1。我会在google.maps.Marker构造函数(或setMap方法,因为我认为构造函数在内部调用它)周围添加一个包装器,该函数自动调用addMarker,但仍然是一个不错的答案:)。
森花舞(Maiku Mori)2009年

@Maiku Mari,您会用代码显示您将做些什么以及为什么做。谢谢
mp_09年

这不是解决方案吗?您可以通过在要清除的特定标记上使用set_map(null)来删除标记,如果要清除所有标记,则可以使用此功能循环浏览。如果你想要更多的东西在这里提出要求:code.google.com/p/gmaps-api-issues/issues/...
Petrogad


6
-1风格不好。仅创建了一个标记数组,但clearMapers之后的每个地图都创建了一个标记数组(由于原型的获取/设置差异)。具有多个地图对象的令人讨厌的错误。
托马斯

18

在新版本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;
  }
}

6

Google的演示库演示了如何进行演示:

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

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

长话短说,它们将标记保留在全局阵列中。清除/删除它们时,它们遍历数组并在给定的标记对象上调用“ .setMap(null)”。

但是,此示例显示了一个“技巧”。在此示例中,“清除”表示将它们从地图中删除,但将其保留在数组中,这使应用程序可以快速将它们重新添加到地图中。从某种意义上讲,这就像“隐藏”它们。

“删除”也会清除数组。


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

仅在IE上工作。


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

在chrome,firefox上工作,即...


1

6

解决方案非常简单。您可以使用方法:marker.setMap(map);。在这里,您可以定义图钉将出现在哪个地图上。

因此,如果您null使用此方法(marker.setMap(null);)进行设置,则该图钉将消失。


现在,您可以在使地图中的所有标记消失的同时编写一个函数witch。

您只需添加即可将引脚放置在数组中,并使用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 = [];
  }

这是我完整的代码。这是我可以简化为的最简单的方法。 请注意,您可以用YOUR_API_KEY关键的Google API 替换代码:

<!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或完整的文档。


5

干净,容易应用罗林格的答案。

function placeMarkerAndPanTo(latLng, map) {
      while(markersArray.length) { markersArray.pop().setMap(null); }
      var marker = new google.maps.Marker({
        position: latLng,
        map: map
      });
      map.panTo(latLng);

      markersArray.push(marker) ;
    }


4

在这里,您可以找到有关如何删除标记的示例:

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 = [];
}

3

来自Anon的以下内容效果很好,尽管在反复清除覆盖层时会闪烁。

只需执行以下操作:

一,声明一个全局变量:

var markersArray = [];

二。定义一个函数:

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

三,在调用以下代码之前,将标记推入“ markerArray”中:

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

IV。clearOverlays()在需要时调用该函数。

而已!!

希望对您有所帮助。


1
for(in in markersArray){}可能没有按照您的预期去做。如果Array扩展了代码中的其他任何位置,它还将遍历这些属性,而不仅仅是索引。markersArray.forEach()并非所有地方都支持javascript版本。您会更好for(var i=0; i<markersArray.length; ++i){ markersArray.setMap(null); }
Kit Sunde 2012年

3

我发现在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();

将该库拉入以清除标记似乎过大了。所有的工作clearMarkers都是遍历标记调用marker.setMap(null)(我检查了源)。将它们放在一个数组中然后自己做会减少工作。
Kit Sunde 2012年

3

您也可以通过这种方式进行操作:

function clearMarkers(category){ 
  var i;       

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

2

我刚刚使用kmlLayer.setMap(null)进行了尝试,并且它起作用了。不知道这是否可以与常规标记一起使用,但似乎可以正常使用。


2

清除所有叠加层,包括多边形,标记等。

只需使用:

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

这还会重置地图吗?假设用户是否已将地图拖动到新区域?
Kichu 2013年

2

要从地图中删除所有标记,请创建类似以下内容的函数:

1.addMarker(位置):此功能用于在地图上添加标记

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 = [];
      }

2

最干净的方法是迭代地图的所有功能。标记(以及多边形,折线等)存储在地图的数据层中。

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

如果是通过图形管理器添加标记的,那么最好创建一个全局标记数组或在创建时将标记推入数据层,如下所示:

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类方法。



0

我不知道为什么,但是,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);
    }
});

0

只需遍历标记并将其从地图中删除,然后清空地图标记数组即可:

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


0

我已经尝试了所有建议的解决方案,但是当我所有的标记都在群集中时,对我没有任何帮助。最终我只是这样:

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

-1

您是说要删除它们还是隐藏它们或删除它们?

如果隐藏:

function clearMarkers() {
            setAllMap(null);
        }

如果要删除它们:

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

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


-1

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

var markersList = [];    

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

function addMarkers() {
   var marker = new google.maps.Marker({
        position : {
            lat : 12.374,
            lng : -11.55
        },
        map : map
       });
      markersList.push(marker);
   }

-1

我找到了简单的解决方案(我认为):

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

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



-3

我知道这可能是一个简单的解决方案,但这就是我要做的

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

每次都为我工作。


2
$(“#map_canvas”)。html(“”); 实际上会清除整个map div,并且也依赖jQuery,因此您的响应既愚蠢又无益。
2015年

对,那是正确的。初始化地图和标记
kronus 2015年

但是他不想重新初始化地图,他想删除现有的标记
山姆

我只是提供发现删除现有标记的方法。至少试一试,然后告诉我是否有效。它对我
有用

2
想要删除地图标记的全部目的是避免必须重新初始化地图,像我这样的情况意味着,因为如果我清除了Google的绘画库并重新初始化整个地图,那么我正在使用google绘图库在地图上绘图消失的唯一停止方法是存储所有叠加层并重新添加它们,这也是很多不必要的工作。重新初始化地图不会删除标记,而是再次从头开始重新创建它,不会删除标记。
2015年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.