在Google地图上删除圈子后，标签仍然存在。 我在像
这样的圆圈上用InfoBox显示标签myOptions.content = datadetail[i].Count;
var ibLabel = new InfoBox(myOptions);
ibLabel.open(map);
我想在某些条件下清除ZoomIn / ZoomOut事件中的圆圈。 圈子很清楚，但标签仍然存在。 这是我的完整剧本。谢谢。
<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: 12,
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");
}
});
});
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(false);
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(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(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].setOptions({ fillOpacity: 0, strokeOpacity: 0 });
gmarkers[i].setMap(null);
}
}
</script>
答案 0 :(得分：-1)
var gmarkers = [];
var gmlist = [];
var infoBoxList=[];
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: 12,
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();
ClearInfoBox();
console.log(map.getZoom());
bindMarkerOnMap("level_0");
} else if (currentZoom >= 13) {
console.log("level_1 fired + " + currentZoom);
ClearMapMaker();
ClearInfoBox();
console.log(map.getZoom());
bindMarkerOnMap("level_1");
}else if (currentZoom >= 15) {
bindMarkerOnMap("level_2");
}
});
});
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(false);
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(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);
infoBoxList.push(ibLabel);
gmarkers.push(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].setOptions({ fillOpacity: 0, strokeOpacity: 0 });
gmarkers[i].setMap(null);
}
}
function ClearInfoBox() {
console.log(infoBoxList);
for (i = 0; i < infoBoxList.length; i++) {
gmlist[i].close();
}
}
</script>
你可以尝试一下。