切换隐藏/显示Google地图标记 [英] Toggle hide/show Google map markers
问题描述
我有一个带有艺术家位置标记的自定义Google地图。我想制作8种不同类别的标记。我读了关于必须制作标记数组并分配一个类别，但我真的不知道从哪里开始。
我认为这个问题接近我的想要：
按类别切换开启/关闭Google地图标记。
试图让这种工作，但无济于事，我只知道太少。
这是我的HTML。
< body onload =initialize（ ）>
< div id =map_container>
< div id =map_canvasstyle =width：700px; height：350px>
< / div>
< / div>
< div id =map_filter>
< form action =＃>
< input type =checkboxid =beeldendonclick =displayMarkers（1）/>< label> Beeldende kunst< / label>< br />
< input type =checkboxid =filmonclick =displayMarkers（2）/>< label>电影/照片< / label>< br />
< input type =checkboxid =dansonclick =displayMarkers（3）/>< label> Dans< / label>
< / form>
< / div>
< / body>
这里是我的JS。我有一个cat1阴影和cat1图标，应该有8种不同的图标，但这可能不是这样做的方法，所以我只将它保存在一只猫的可读性中。
然后我有一个标记（art1），它有它自己的位置，阴影等等。
函数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 =firstHeadingclass =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。 < / p>'+
'< / div>'+
'< / div>';如果您有任何疑问，请与我们联系。
var infowindow = new google.maps.InfoWindow（{
content：contentString
}）;
var cat1Shadow = new google.maps.MarkerImage（'images / shadow.png'，
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），
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（{
位置：art1Pos，
地图：map，
图标：cat1Icon，
shadow：cat1Shadow，
标题：Beeldende kunst，
zIndex：4
}）;
google.maps.event.addListener（art1Marker，'click'，function（）{
infowindow.open（map，art1Marker）;
}）;
所以..创建不同数组的最佳方式是标记并用复选框切换其可见性？
另外，我希望能够将地址分配给标记，而不是查找坐标。
谢谢
解决方案创建不同数组标记的最好方法是做这样的事情。你说你有8种标记，所以做8次。
var locations = [
$ b $ ['上海'，31.232,121.47,5885]，
['北京'，39.88,116.40,6426]，
['广州'，23.129,113.264,4067]，
[ '深圳'，22.54,114.05,3089]，
['杭州'，30.27,120.15,954]，
['香港'，22.39,114.10,1885]
];
函数getMarkers（）{
for（i = 0; i< locations.length; i ++）{
marker [i] = new MarkerWithLabel（{
位置：new google.maps.LatLng（locations [i] [1]，locations [i] [2]），
draggable：false，
map：map，
labelContent：locationsCA [ i] [3]，
图标：new google.maps.MarkerImage（iconArray [i]），
labelAnchor：新的google.maps.Point（30，0），
labelClass：标签，//标签的CSS类
labelStyle：{opacity：0.75}
}）;
至于你的第二个问题，关于使用复选框切换可视性，我不知道如何检查框，但切换功能可以通过事件触发器轻松实现。
无论是标记点击还是缩放，还是其他任何事件（请查看事件文档），您都会在该事件之后设置一个操作。这里是一个例子。
google.maps.event.addListener（map，'zoom_changed'，function（）{$ b $如果（map.getZoom（）> = 4）{
hideMarkers（）;
}
}
并且您的hideMarkers（）函数使用此命令使其不可见
marker .setVisible（false）;
希望有帮助
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..
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.
Here's my HTML. I have a map and a few checkboxes ready, the checkboxes aren't used yet.
<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.
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
解决方案 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.
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
marker.setVisible(false);
Hope that helps
这篇关于切换隐藏/显示Google地图标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
