カテゴリごとにGoogleマップマーカーをオン/オフに切り替えます
-
27-10-2019 - |
質問
私は以下を持っていて、引っ張られているさまざまなカテゴリタイプでマーカーを並べ替えたい cat: dataMarkers.cat
. 。これを実際に最善の方法で行う方法について少し迷っています。私は各カテゴリのマーカーマナージャーを考えていますか?各カテゴリが独自のマーカーアレイにある必要がありますか?これは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
各マーカーで、正しい値を与えます。
カテゴリが変更されるたびに、マーカーの配列を実行して設定します marker.visible = true
正しいカテゴリのものについて、そして marker.visible = false
他のすべてに。
JavaScriptでは、新しいフィールドをオブジェクトに動的に割り当てるのは簡単です。あなたは単に言うでしょう:
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
存在する限り。
所属していません StackOverflow