我有属于多个类别的标记,我希望能够使用复选框隐藏/显示基于类别的标记。我已经让复选框在没有连接信息的情况下工作,但是现在我附加了infowindow,复选框不再起作用了。我认为show和hide函数无法以某种方式访问arrMarkers.category,因为当我注释掉marker.setVisibile(false)
时,所有标记都是可见的。但是有了那条线,不知何故第一个标记仍然可见,而其他所有标记都不是......
这是我的代码,如果有人可以向我解释为什么它不起作用,那就太棒了:
var markerData = [
['blueforce1', 52.308584, 4.767637, 1, 'yellow', 'yes'],
['blueforce2', 52.308656, 4.76517, 1, 'yellow', 'yes'],
['blueforce3', 52.308656, 4.72517, 1, 'yellow', 'yes'],
['blueforce4', 52.309686, 4.762734, 2, 'red', 'yes'],
['blueforce5', 52.309463, 4.771693, 2, 'red', 'yes'],
['blueforce6', 52.309963, 4.771693, 2, 'red', 'yes'],
['camera7', 52.308656, 4.76517, 3, 'camera', 'no'],
['blueforce8', 52.318656, 4.73517, 3, 'camera', 'no'],
];
function initialize()
{
var arrMarkers = [];
var mapProp = { //set map properties
center:new google.maps.LatLng(52.309213,4.762316),
zoom:16,
mapTypeId:google.maps.MapTypeId.HYBRID
};
//create map variable with properties
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
for (i = 0; i < markerData.length; i++) {
var pos = new google.maps.LatLng(markerData[i][1], markerData[i][2]);
var title = markerData[i][0];
var category = markerData[i][3];
var new_marker = addMarker(pos, title, category);
arrMarkers.push(new_marker);
//new_marker[i].setVisible(false);
}
function addMarker (pos, title, category) {
var marker = new google.maps.Marker({
map: map,
position: pos,
icon: "mapIcons/marker_"+markerData[i][4]+".png",
category: category
});
var infoBubble = new InfoBubble({
content: '<div class="phoneytext">' + title + '<div class="left-col2"></div></div>',
boxClass: 'info-box',
alignBottom: true,
pixelOffset: new google.maps.Size(-150, -40),
maxWidth: 300,
padding: 0,
closeBoxMargin: '0px',
borderColor: '#ffffff',
borderRadius: '0',
maxWidth: 535,
disableAutoPan: false,
hideCloseButton: false,
backgroundClassName: 'phoney'
});
google.maps.event.addListener(marker, 'click', function () {
infoBubble.open(map, marker);
//console.log(infoBubble.content);
});
return marker;
}
//define click action for id 'open'
google.maps.event.addDomListener(document.getElementById('open'),'click', function() {
infoBubble.open();
});
//define click action for id 'closed'
google.maps.event.addDomListener(document.getElementById('close'),'click', function() {
infoBubble.close();
});
}//end of initialize
// == shows all markers of a particular category, and ensures the checkbox is checked ==
function show(category) {
for (var i=0; i<arrMarkers.length; i++) {
if (arrMarkers[i].category == category) {
arrMarkers[i].setVisible(true);
}
}
// == check the checkbox ==
document.getElementById("cat"+category).checked = true;
}
// == hides all markers of a particular category, and ensures the checkbox is cleared ==
function hide(category) {
for (var i=0; i<arrMarkers.length; i++) {
if (arrMarkers[i].category == category) {
arrMarkers[i].setVisible(false);
}
}
// == clear the checkbox ==
document.getElementById("cat"+category).checked = false;
// == close the info window, in case its open on a marker that we just hid
//infowindow.close();
}
// == a checkbox has been clicked ==
function boxclick(box,category) {
if (box.checked) {
show(category);
}
else {
hide(category);
}
}
HTML:
<form action="#">
Blue Forces cat 1: <input type="checkbox" id="cat1" onclick="boxclick(this, 1)" checked/>
Blue Forces cat 2: <input type="checkbox" id="cat2" onclick="boxclick(this, 2)" checked/>
Cameras: <input type="checkbox" id="cat3" onclick="boxclick(this, 3)" />
</form>