按类别开启/关闭Google地图标记 [英] Toggle on/off Google map markers by category
问题描述
我有下面的内容,并希望按照 cat:dataMarkers.cat
下的各种类别类型对标记进行排序。我有点失落,因为如何以最好的方式实际做到这一点。我在为每个类别考虑markerManager?我需要每个类别都在自己的markerManager数组中吗?这与markerClusterer有什么关系?
I have the below and want to sort the markers by the various category type being pulled under cat: dataMarkers.cat
. Im a bit lost as to how to actually do this the best way. I'm thinking markerManager for each category? Would I need each category to be in its own markerManager array? How does this factor in with markerClusterer?
var map;
function initialize() {
var center = new google.maps.LatLng(39.632906,-106.524591);
var options = {
'zoom': 8,
'center': center,
'mapTypeId': google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), options);
<!--Load Markers-->
var markers = [];
for (var i = 0, dataMarkers; dataMarkers = data.markers[i]; i++) {
var latLng = new google.maps.LatLng(dataMarkers.lat, dataMarkers.lng);
var marker = new google.maps.Marker({
position: latLng,
title: dataMarkers.title,
date: dataMarkers.date,
time: dataMarkers.time,
desc: dataMarkers.desc,
img: dataMarkers.img,
add: dataMarkers.address,
cat: dataMarkers.cat,
map: map
});
<!--Display InfoWindows-->
var infowindow = new google.maps.InfoWindow({
content: " "
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('<div id="mapCont"><img class="mapImg" src="'+this.img+'"/>' +
'<div class="mapTitle">'+this.title+'</div>' +
'<div class="mapHead">Date: <div class="mapInfo">'+this.date+'</div>' +
'<div class="mapHead">Time: <div class="mapInfo">'+this.time+'</div>' +
'<p>'+this.desc+'</p></div>');
infowindow.open(map, this);
});
markers.push(marker);
}
<!--Cluster Markers-->
var markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: 15,
gridSize: 50
});
}
推荐答案
我推荐您将所有标记存储在一个数组中。在每个标记上创建一个名为 category
的字段并赋予它正确的值。
I recommend you store all the markers in an array. Create a field called category
on each marker and give it the correct value.
每当类别更改时,通过你的标记数组,并在正确的类别中设置 marker.visible = true
,并且 marker.visible = false
在所有其他上。
Whenever the category changes, you run through your array of markers and set marker.visible = true
on the ones in the correct category, and marker.visible = false
on all the others.
在JavaScript中,很容易将新字段动态分配给对象。您只需说:
In JavaScript, it is easy to dynamically assign new fields to an object. You would simply say:
var marker = new google.maps.Marker({
position: latLng,
title: dataMarkers.title,
date: dataMarkers.date,
time: dataMarkers.time,
desc: dataMarkers.desc,
img: dataMarkers.img,
add: dataMarkers.address,
cat: dataMarkers.cat,
map: map
});
marker.category = THE_CATEGORY_IT_BELONGS_TO;
标记将会有一个名为 category的字段
只要它存在。
The marker will then have a field called category
as long as it exists.
这篇关于按类别开启/关闭Google地图标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!