切换隐藏/显示谷歌地图标记
Toggle hide/show Google map markers
我有一个自定义的谷歌地图,上面有艺术家位置的标记。我想制作 8 种不同类别的标记。我读到了必须制作标记数组并分配类别的信息,但老实说我不知道从哪里开始。.
我认为这个问题接近我想要的:按类别打开/关闭谷歌地图标记。试图让它工作,但无济于事,我只是知识太少了。
这是我的 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>
这是我的JS。我有一个 cat1 阴影和 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);
});
}
所以。。创建不同的标记数组并使用复选框切换其可见性的最佳方法是什么?
另外,我希望能够为标记分配地址而不是查找坐标。
谢谢
创建不同标记数组的最佳方法是执行此类操作。你说你有 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);
希望有帮助
您可以将它们存储在数组中,并使用marker.setMap(null)表示不可见,marker.setMap(map)表示可见
。请参阅文档中的示例:https://developers.google.com/maps/documentation/javascript/examples/marker-remove
相关文章:
- 如何更改角度谷歌地图上的集群图标
- 谷歌地图API-显示具有不同图标的标记
- 谷歌地图-更改图层图标大小
- 在地图加载/页面加载时,我想将地图设置为当前地理位置,但不想在地图上显示定位图标
- 将图标作为参数传递不会;t工作-谷歌地图
- 谷歌地图隐藏手图标
- 从谷歌地图信息窗口中删除关闭图标
- 在javascript中设置谷歌地图标记图标属性
- 我是否可以在单击特定图标时更改地图标记图标,然后在单击另一个图标时切换,等等
- 我如何才能在某些条件下更改c#中谷歌地图标记的图标
- 使用HTML元素代替gmap3的地图标记图标
- 使用jQuery下拉菜单更改谷歌地图图标
- 使用SVG文件动态修改谷歌地图图标
- 在Javascript中使用相对路径设置谷歌地图图标
- 使谷歌地图图标图像更小
- 自定义谷歌地图图标如果值>=1
- 谷歌地图图标赢得't显示
- 将自定义参数添加到谷歌地图图标中
- 使用精灵自定义谷歌地图图标
- 谷歌地图图标颜色