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

JavaScript HTML

ProAGil

2020-03-20

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

map.clearOverlays();

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

Reference API,对我来说还不清楚。

第2486篇《Google Maps API v3:如何删除所有标记?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

21个回答
乐小小 2020.03.20

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

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

每次都为我工作。

樱小胖Mandy 2020.03.20

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

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

LEYGreen 2020.03.20

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

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

function Clear(){
     marker.setMap(null);
}
前端Tom 2020.03.20

我用速记做得很好。做就是了

    map.clear();
Gil伽罗小宇宙 2020.03.20

您需要将地图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);
   }
飞云 2020.03.20

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

如果隐藏:

function clearMarkers() {
            setAllMap(null);
        }

如果要删除它们:

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

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

Pro逆天猿 2020.03.20

只是清除Googlemap

mGoogle_map.clear();
古一TonyPro 2020.03.20

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

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

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

这是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

小宇宙小小米亚 2020.03.20

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

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 = [];
      }
Stafan路易 2020.03.20

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

Stafan 2020.03.20

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

只需使用:

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

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

function clearMarkers(category){ 
  var i;       

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

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

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

set_map在两个答案中张贴的“ ”功能似乎在Google Maps v3 API中不再起作用。

我不知道发生了什么

更新:

Google似乎更改了其API,以使“ set_map”不是“ setMap”。

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

宝儿米亚飞云 2020.03.20

干净,简单地使用rolinger的答案。

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) ;
    }
小胖 2020.03.20

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

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

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

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

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

“删除”也会清除数组。

伽罗理查德 2020.03.20
for (i in markersArray) {
  markersArray[i].setMap(null);
}

仅在IE上工作。


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

在Chrome,Firefox上工作,即...

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

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

米亚 2020.03.20

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

我已经更正了,以这种方式更改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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android