Google지도 아이콘을 카테고리별로 켜기/끄기

Question

아래에 나와있는 다양한 카테고리 유형별로 마커를 정렬하려면 cat: dataMarkers.cat 아래로 가져 가야합니다. 임 실은이 방법을 실제로 어떻게 할 것인가에 관해서는 조금 잃어 버렸다. 각 카테고리에 대해 markerManager를 사용하고 있습니까? 고유 한 markerManager 배열에 각 범주가 있어야합니까? 이 요인은 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 
       }); 

} 

Answer 1

모든 마커를 배열에 보관하는 것이 좋습니다. 각 표식에 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라는 필드가 있습니다.