我尝试在触发ZoomIn / ZoomOut事件时删除所有圆圈和标记。 我像For
一样按下For循环中的每个标记和圆圈gmarkers.push(new google.maps.Circle(circle)); // For Circles
gmlist.push(marker); // For Marker
并尝试删除我想要清除时如
function ClearMapMaker() {
console.log(gmlist);
for (i = 0; i < gmlist.length; i++) {
gmlist[i].setMap(null);
}
gmlist = [];
console.log(gmarkers);
for (i = 0; i < gmarkers.length; i++) {
gmarkers[i].setMap(null);
}
}
标记被删除但圆圈不被删除。 如何在地图上删除圈子？这是我的完整代码。谢谢。
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCbhHXN1r0QOFwUrQSbsd0JDbRVHmEDKTM"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<script>
var gmarkers = [];
var gmlist = [];
var fill_color_val = '#3888ff';
var labelText = "1";
var currentZoom = 0;
$(function () {
function initialize_map() {
var mapProp = {
minZoom: 11,
maxZoom: 20,
center: new google.maps.LatLng(16.7803886, 96.1844148),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
bindMarkerOnMap("level_0");
}
initialize_map();
map.addListener('zoom_changed', function () {
//currentZoom = map.getZoom();
//if (currentZoom <= 12) {
// ClearMapMaker();
// console.log(map.getZoom());
// bindMarkerOnMap("level_0");
//} else if (currentZoom >= 13) {
// console.log("level_1 fired + " + currentZoom);
// ClearMapMaker()
// console.log(map.getZoom());
// bindMarkerOnMap("level_1");
//}else if (currentZoom >= 15) {
// bindMarkerOnMap("level_2");
//}
ClearMapMaker();
});
});
function bindMarkerOnMap(level) {
console.log(level);
if (level == "level_0") {
console.log("level_0 binding");
for (var i = 0; i < data.length; i++) {
var latlng = new google.maps.LatLng(data[i].Lat, data[i].Long);
var myOptions = {
content: labelText,
boxStyle: {
border: "none",
textAlign: "center",
fontSize: "10pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, -5),
position: latlng,
closeBoxURL: "",
isHidden: false,
pane: "floatPane",
enableEventPropagation: true
};
// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
map: map,
radius: 1600, // 10 miles in metres
fillColor: fill_color_val,
strokeColor: '#69DAED',
strokeWeight: 2,
fillOpacity: 1,
});
var marker = new google.maps.Marker({
position: latlng,
title: data[i].Author,
draggable: false,
map: map
});
marker.setVisible(true);
circle.bindTo('center', marker, 'position');
google.maps.event.addListener(circle, 'click', getInfoCallback(map, latlng));
myOptions.content = data[i].Count;
var ibLabel = new InfoBox(myOptions);
ibLabel.open(map);
gmarkers.push(new google.maps.Circle(circle));
gmlist.push(marker);
}
} else if (level == "level_1") {
console.log("level_1 binding");
for (var i = 0; i < datadetail.length; i++) {
var latlng = new google.maps.LatLng(datadetail[i].Lat, datadetail[i].Long);
var myOptions = {
content: labelText,
boxStyle: {
border: "none",
textAlign: "center",
fontSize: "10pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, -5),
position: latlng,
closeBoxURL: "",
isHidden: false,
pane: "floatPane",
enableEventPropagation: true
};
// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
map: map,
radius: 800,
fillColor: fill_color_val,
strokeColor: '#69DAED',
strokeWeight: 2,
fillOpacity: 1,
});
var marker = new google.maps.Marker({
position: latlng,
title: datadetail[i].Author,
draggable: false,
map: map
});
marker.setVisible(false);
circle.bindTo('center', marker, 'position');
google.maps.event.addListener(circle, 'click', getInfoCallback(map, latlng));
myOptions.content = datadetail[i].Count;
var ibLabel = new InfoBox(myOptions);
ibLabel.open(map);
gmarkers.push(new google.maps.Circle(circle)); // For Circles
gmlist.push(marker); // For Marker
}
}
}
function getInfoCallback(map, latlng) {
return function () {
map.setZoom(15);
map.setCenter(latlng);
};
}
var data = [
{ Id: 1, Author: "Daniel Lo Nigro", Text: "Hello ReactJS.NET World!", Lat: 16.7803886, Long: 96.1844148, Count: 250 },
{ Id: 2, Author: "Pete Hunt", Text: "This is one comment", Lat: 16.9234506, Long: 96.1357186, Count: 5 },
{ Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 17.120420, Long: 96.069629, Count: 10 },
{ Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.908606, Long: 96.0619453, Count: 80 },
{ Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.916317, Long: 96.274875, Count: 70 },
{ Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.9870346, Long: 96.0644941, Count: 60 },
];
var datadetail = [
{ Id: 1, Author: "Daniel Lo Nigro", Text: "Hello ReactJS.NET World!", Lat: 16.7803986, Long: 96.1844148, Count: 115 },
{ Id: 2, Author: "Pete Hunt", Text: "This is one comment", Lat: 16.9236506, Long: 96.1357186, Count: 51 },
{ Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 17.100420, Long: 96.069629, Count: 120 },
{ Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.963606, Long: 96.0689453, Count: 870 },
{ Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.916987, Long: 96.254875, Count: 780 },
{ Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.9877846, Long: 96.0643941, Count: 660 },
{ Id: 1, Author: "Daniel Lo Nigro", Text: "Hello ReactJS.NET World!", Lat: 16.7723886, Long: 96.1844148, Count: 350 },
{ Id: 2, Author: "Pete Hunt", Text: "This is one comment", Lat: 16.9344506, Long: 96.1357186, Count: 55 },
{ Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 17.100420, Long: 96.069629, Count: 177 },
{ Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.900606, Long: 96.0619453, Count: 25 },
{ Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.919617, Long: 96.274875, Count: 57 },
{ Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.9877546, Long: 96.0644941, Count: 78 },
{ Id: 1, Author: "Daniel Lo Nigro", Text: "Hello ReactJS.NET World!", Lat: 16.7864886, Long: 96.1844148, Count: 32 },
{ Id: 2, Author: "Pete Hunt", Text: "This is one comment", Lat: 16.9238506, Long: 96.1388186, Count: 45 },
{ Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 17.120420, Long: 96.096629, Count: 78 },
{ Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.908646, Long: 96.0779453, Count: 34 },
{ Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.922317, Long: 96.288875, Count: 12 },
{ Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.9827346, Long: 96.0699941, Count: 29 },
{ Id: 1, Author: "Daniel Lo Nigro", Text: "Hello ReactJS.NET World!", Lat: 16.7807186, Long: 96.1840148, Count: 9 },
{ Id: 2, Author: "Pete Hunt", Text: "This is one comment", Lat: 16.9263506, Long: 96.1342186, Count: 85 },
{ Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 17.120420, Long: 96.064549, Count: 75 },
{ Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.9043606, Long: 96.06299453, Count: 63 },
{ Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.915817, Long: 96.277875, Count: 19 },
{ Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.9870876, Long: 96.0864941, Count: 72 },
];
//Clear map makers on google map
function ClearMapMaker() {
console.log(gmlist);
for (i = 0; i < gmlist.length; i++) {
gmlist[i].setMap(null);
}
gmlist = [];
console.log(gmarkers);
for (i = 0; i < gmarkers.length; i++) {
gmarkers[i].setMap(null);
}
}
</script>
}
答案 0 :(得分：1)
您正在创建两次圈子：
下面：
var circle = new google.maps.Circle({
map: map,
radius: 1600, // 10 miles in metres
fillColor: fill_color_val,
strokeColor: '#69DAED',
strokeWeight: 2,
fillOpacity: 1,
});
在这里：
gmarkers.push(new google.maps.Circle(circle));
只需更改最后一行：
gmarkers.push(circle);