我有一个带有艺术家位置标记的自定义Google map 。我想做8种不同类别的标记。我读到有关必须制作标记数组和分配类别的信息,但老实说,我不知道从哪里开始。
我认为这个问题接近我想要的:
Toggle on/off Google map markers by category。
试图使它正常工作,但徒劳无功,我只是了解的很少。
这是我的HTML。我有一张 map 和几个复选框,这些复选框尚未使用。
<body onload="initialize()">
<div id="map_container">
<div id="map_canvas" style="width:700px; height:350px">
</div>
</div>
<div id="map_filter">
<form action="#">
<input type="checkbox" id="beeldend" onclick="displayMarkers(1)" /><label>Beeldende kunst</label><br />
<input type="checkbox" id="film" onclick="displayMarkers(2)" /><label>Film/fotografie</label><br />
<input type="checkbox" id="dans" onclick="displayMarkers(3)" /><label>Dans</label>
</form>
</div>
</body>
这是我的JS。我有一个cat1阴影和cat1图标,应该是8种不同的类型,但这可能不是这样做的方法,因此出于可读性考虑,我只将其保留在一只猫中。
然后我有一个标记(art1),它具有自己的pos,阴影等。
function initialize() {
var latlng = new google.maps.LatLng(52.0840356, 5.1546501);
var settings = {
zoom: 13,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Høgenhaug</h1>'+
'<div id="bodyContent">'+
'<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var cat1Shadow = new google.maps.MarkerImage('images/shadow.png',
new google.maps.Size(130,50),
new google.maps.Point(0,0),
new google.maps.Point(65, 50)
);
var cat1Icon = new google.maps.MarkerImage('images/beeldend.png',
new google.maps.Size(100,50),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var art1Pos = new google.maps.LatLng(52.0840356, 5.1546501);
var art1Marker = new google.maps.Marker({
position: art1Pos,
map: map,
icon: cat1Icon,
shadow: cat1Shadow,
title:"Beeldende kunst",
zIndex: 4
});
google.maps.event.addListener(art1Marker, 'click', function() {
infowindow.open(map,art1Marker);
});
}
因此,创建标记的不同阵列并使用复选框切换其可见性的最佳方法是什么?
另外,我希望能够为标记分配地址,而不是查找坐标。
谢谢
最佳答案
创建不同标记数组的最佳方法是执行类似操作。您说您有8个类别的标记,因此要进行8次。
var locations = [
['Shanghai', 31.232, 121.47, 5885],
['Beijing', 39.88, 116.40, 6426],
['Guangzhou', 23.129, 113.264, 4067],
['Shenzhen', 22.54, 114.05, 3089],
['Hangzhou', 30.27, 120.15, 954],
['Hong Kong', 22.39, 114.10, 1885]
];
function getMarkers() {
for (i = 0; i < locations.length; i++) {
marker[i] = new MarkerWithLabel({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
draggable: false,
map: map,
labelContent: locationsCA[i][3],
icon: new google.maps.MarkerImage(iconArray[i]),
labelAnchor: new google.maps.Point(30, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75}
});
至于您第二个关于使用复选框切换可见性的问题,我不知道如何制作复选框,但是使用事件触发器可以轻松实现切换功能。
无论是标记单击,缩放还是任何其他事件(请查看文档以了解事件),都可以在该事件之后设置操作。这是一个例子。
google.maps.event.addListener(map,'zoom_changed',function () {
if (map.getZoom() >= 4) {
hideMarkers();
}
}
和您的hideMarkers()函数一起使用,以使其不可见
marker.setVisible(false);
希望能有所帮助
关于javascript - 切换隐藏/显示Google map 标记,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/11141865/