Javascript 切换隐藏/显示 Google 地图标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11141865/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle hide/show Google map markers
提问by meneerfab
I have a custom Google map with markers of artist locations. I want to make 8 different categories of markers. I read about having to make arrays of markers and assigning a category, but I honestly don't know where to start..
我有一个带有艺术家位置标记的自定义谷歌地图。我想制作 8 种不同类别的标记。我读到必须制作标记数组并分配类别，但老实说我不知道从哪里开始..
I think this question comes close to what I want: Toggle on/off Google map markers by category. Tried to get that working, but to no avail, I just have too little knowledge.
我认为这个问题接近我想要的： Toggle on/off Google map marker by category。试图让它发挥作用，但无济于事，我只是知识太少。
Here's my HTML. I have a map and a few checkboxes ready, the checkboxes aren't used yet.
这是我的 HTML。我准备好了地图和一些复选框，但尚未使用这些复选框。
<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>
And here's my JS. I have a cat1 shadow and cat1 icon, that should be 8 different kinds, but this maybe isn't the way to do it so I kept it at just one cat for readability. Then I have one marker (art1) that has it's own pos, shadow etc.
这是我的 JS。我有一个 cat1 shadow 和 cat1 图标，应该有 8 种不同的类型，但这可能不是这样做的方法，所以为了便于阅读，我将它保留为一只猫。然后我有一个标记（art1），它有自己的位置、阴影等。
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);
});
}
So.. What's the best way to create different arrays of markers and toggle their visibility with check boxes?
那么.. 创建不同的标记数组并使用复选框切换其可见性的最佳方法是什么？
Also, I'd like to be able to assign addresses to markers in stead of looking up the coordinates.
另外，我希望能够为标记分配地址，而不是查找坐标。
Thank you
谢谢
回答by krikara
The best way to create different arrays of markers is to do something like this. You said you had 8 categories of markers, so do this 8 times.
创建不同的标记数组的最佳方法是做这样的事情。你说你有 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}
});
As for your second question about toggle visibility with check boxes, I don't know how to make check boxes, but the toggle feature can be easily implemented with an event trigger. Whether it is a marker click or a zoom, or any other event (check the documentation for events), you get set up an action following that event. Here is an example.
至于您关于使用复选框切换可见性的第二个问题，我不知道如何制作复选框，但是可以使用事件触发器轻松实现切换功能。无论是标记单击或缩放，还是任何其他事件（查看事件文档），您都可以在该事件之后设置操作。这是一个例子。
google.maps.event.addListener(map,'zoom_changed',function () {
if (map.getZoom() >= 4) {
hideMarkers();
}
}
And your hideMarkers() function with use this command to make it invisible
并且您的 hideMarkers() 函数使用此命令使其不可见
marker.setVisible(false);
Hope that helps
希望有帮助
回答by cyptus
you can store them in an array and toggle the visbility with marker.setMap(null) for invisible and marker.setMap(map) for visible.
您可以将它们存储在一个数组中，并使用marker.setMap(null) 切换可见性，标记为不可见，而marker.setMap(map) 可见。
see the example from the docs: https://developers.google.com/maps/documentation/javascript/examples/marker-remove
查看文档中的示例：https: //developers.google.com/maps/documentation/javascript/examples/marker-remove
