Javascript 谷歌地图API v3:如何删除所有标记?
在Google Maps API v2中,如果我想删除所有地图标记,我可以简单地执行以下操作:Javascript 谷歌地图API v3:如何删除所有标记?,javascript,html,google-maps,google-maps-api-3,Javascript,Html,Google Maps,Google Maps Api 3,在Google Maps API v2中,如果我想删除所有地图标记,我可以简单地执行以下操作: map.clearOverlays(); 如何在谷歌地图APIv3中做到这一点 看看,我还不清楚。V3中似乎还没有这样的功能 人们建议在一个数组中保留对地图上所有标记的引用。然后,当您想要删除em all时,只需通过数组循环并在每个引用上调用.setMap(null)方法 我的版本: google.maps.Map.prototype.markers = new Array(); google.
map.clearOverlays();
如何在谷歌地图APIv3中做到这一点
看看,我还不清楚。V3中似乎还没有这样的功能 人们建议在一个数组中保留对地图上所有标记的引用。然后,当您想要删除em all时,只需通过数组循环并在每个引用上调用.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);
}
google.maps.Map.prototype.markers=newarray();
google.maps.Map.prototype.getMarkers=function(){
把这个还给我,马克
};
google.maps.Map.prototype.clearMarkers=函数(){
对于(var i=0;igoogle.maps.Map.prototype.markers=new Array();
google.maps.Map.prototype.addMarker=函数(marker){
this.markers[this.markers.length]=标记;
};
google.maps.Map.prototype.getMarkers=function(){
把这个还给我,马克
};
google.maps.Map.prototype.clearMarkers=函数(){
对于(var i=0;i,两个答案中发布的“set_map
”函数在Google Maps v3 API中似乎不再有效
我想知道发生了什么事
更新:
var markersArray = [];
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});
谷歌似乎改变了他们的API,使得“setMap
”不是“setMap
”
同样的问题。此代码不再有效
我已经纠正了它,更改clearMarkers方法如下:
设置映射(空)--->设置映射(空)
google.maps.Map.prototype.clearMarkers=function(){
对于(var i=0;i
文档已更新,包含了有关此主题的详细信息:只需执行以下操作:
markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});
I.声明一个全局变量:
var markersArray = [];
二、 定义一个函数:
function clearOverlays() {
for (var i = 0; i < markersArray.length; i++ ) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
四、 在需要时调用clearOverlays();
或map.clearOverlays();
函数
就是这样!!在新版本v3上,他们建议保留在数组中。如下所示
见第页的示例
以下来自Anon的操作非常完美,尽管在反复清除覆盖层时会闪烁
只需执行以下操作:
markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});
I.声明一个全局变量:
var markersArray = [];
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});
II.定义函数:
var markersArray = [];
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});
III.在调用以下命令之前,将标记推入“markerArray”:
var markersArray = [];
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});
IV.根据需要调用clearOverlays()
函数。
就这样
希望这能对您有所帮助。我发现在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.要清除标记,只需调用标记管理器的clearMarkers()
函数
mgr.clearMarkers();
谷歌的演示画廊有一个演示他们是如何做到这一点的:
您可以查看源代码以查看它们如何添加标记
长话短说,它们将标记保存在一个全局数组中。清除/删除标记时,它们在数组中循环并在给定的标记对象上调用“.setMap(null)”
但是,本例显示了一个“技巧”。“清除”在本例中意味着将它们从映射中删除,但保留在数组中,这允许应用程序快速将它们重新添加到映射中。从某种意义上说,这类似于“隐藏”它们
“Delete”也会清除数组。我刚刚用Kmlayer.setMap(null)尝试过这个方法,但效果很好。不确定这是否适用于常规标记,但似乎可以正常工作。如果使用gmap V3插件:
$(“#map”).gmap(“removeAllMarkers”);
请参阅:您也可以这样做:
function clearMarkers(category){
var i;
for (i = 0; i < markers.length; i++) {
markers[i].setVisible(false);
}
}
函数清除标记(类别){
var i;
对于(i=0;i
他只是在做IE
用于(var i=0;i清除所有覆盖,包括多边形、标记等
只需使用:
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"));
}
在这里,您可以找到如何删除标记的示例:
//将标记添加到地图并推送到数组。
功能添加标记(位置){
var marker=new google.maps.marker({
位置:位置,,
地图:地图
});
标记器。推(标记器);
}
//在阵列中的所有标记上设置贴图。
函数setAllMap(映射){
对于(var i=0;i
我不知道为什么,但是,当我使用方向渲染器时,将设置映射(null)
设置为我的标记对我不起作用
在我的例子中,我还必须调用setMap(null)
到我的directionsrender
诸如此类:
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);
}
});
这是英阳2014年3月11日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.
你的意思是隐藏或删除它们
如果隐藏:
function clearMarkers() {
setAllMap(null);
}
如果要删除它们,请执行以下操作:
function deleteMarkers() {
clearMarkers();
markers = [];
}
请注意,我使用了一个数组标记来跟踪它们,并手动重置它。一个干净而简单的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) ;
}
这是谷歌自己在至少一个示例中使用的方法:
var markers = [];
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
检查Google示例以获取完整的代码示例:
只需在标记上走一走,然后将它们从地图上删除,然后清空地图
// 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 = [];
}
<!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>
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);
}
// 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 = [];
}
var marker = new google.maps.Marker();
function Clear(){
marker.setMap(null);
}
map.clear();
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();
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);
}
});
if(previousMarker != null)
previousMarker.setMap(null);
var marker = new google.maps.Marker({map: resultsMap, position: new google.maps.LatLng(lat_, lang_)});
previousMarker = marker;