[英]Google Maps JavaScript API v3 remove markers
I have looked at a large number of "similar" questions and none of the solutions/answers seem to work for me so here we go: I am generating a simple Google Map with a single marker "onload" I then have a menu list a bit like this 我看了很多“相似”的问题,没有一个解决方案/答案似乎适合我,所以我们走了:我正在生成一个简单的谷歌地图,上面有一个标记“onload”我有一个菜单列表a有点像这样
<ul>
<li class="toggle" id="beaches">Item</li>
<li class="toggle" id="towns">Item</li>
<ul>
that on click uses these arrays to marker-populate the map 点击时使用这些数组来标记填充地图
jQuery - jQuery -
$(".toggle").click(function(){
setMarkers(map,$(this).attr('id'));
});
var beaches = [
['Beach 1',38.285827, 20.611038, 4],
['Beach 2', 38.304958,20.604515, 5],
['Beach 3',38.301691,20.597649, 3]
];
var towns = [
['Town 1',38.343003, 20.535679, 4],
['Town 2',38.339334,20.545807, 5]
];
My population function looks like this: 我的人口函数如下所示:
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var newmarker = locations[i];
var myLatLng = new google.maps.LatLng(newmarker[1], newmarker[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: newmarker[0],
zIndex: newmarker[3]
});
}
But what I need/want to do is clear all markers first before adding the new ones. 但我需要/想要做的是在添加新标记之前先清除所有标记。 Suggestions please Thanks 建议请谢谢
You need to store markers, and call setMap(null)
for every marker to remove from map. 您需要存储标记,并为要从地图中删除的每个标记调用setMap(null)
。
You could try something like this: 你可以尝试这样的事情:
var setMarkers = (function() {
var oldMarkers = null;
return function(map, locations){
//Clearing markers, if they exist
if(oldMarkers && oldMarkers.length !== 0){
for(var i = 0; i < oldMarkers.length; ++i){
oldMarkers[i].setMap(null);
}
}
//Adding new markers
oldMarkers = [];
for (var i = 0; i < locations.length; i++) {
var newmarker = locations[i];
var myLatLng = new google.maps.LatLng(newmarker[1], newmarker[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: newmarker[0],
zIndex: newmarker[3]
});
oldMarkers.push( marker );
}
};
})();
Maybe you could use one function that empty array that contains markers: 也许你可以使用一个包含标记的空数组的函数:
function clear(){
if(locations){
for(var i=0;i<location.length;i++){
locations[i].setMap(null);
}
locations.length=0;
}
}
You need to make sure your markers are stored in a array and then to remove do some thing like 你需要确保你的标记存储在一个数组中,然后删除做一些事情
// Sets the map on all markers in the array.
function removeMarkers {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length=0;
}
So your code would now be 所以你的代码现在就是
var markers [];
function setMarkers(map, locations) {
// remove all markers first
removeMarkers();
for (var i = 0; i < locations.length; i++) {
var newmarker = locations[i];
var myLatLng = new google.maps.LatLng(newmarker[1], newmarker[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: newmarker[0],
zIndex: newmarker[3]
});
//add to marker array
markers.push(marker);
}
You could define a global array of markers and clearing those by calling setMap(null)
before you re-populate the map: 在重新填充地图之前,您可以通过调用setMap(null)
来定义全局标记数组并清除它们:
var markers = [];
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var newmarker = locations[i];
var myLatLng = new google.maps.LatLng(newmarker[1], newmarker[2]);
if (markers[i]) {
markers[i].setMap(null);
}
markers[i] = new google.maps.Marker({
position: myLatLng,
map: map,
title: newmarker[0],
zIndex: newmarker[3]
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.