배열 요소에서 li 값 채우기

Question

ul의 li로 표시된 마커 (핀)가있는지도가 있습니다 (각 li에는 길이가 &의 long 데이터를 정의하는 2 개의 div가 있습니다). 이러한 li은 숨기기/표시와 함께 드롭 다운 메뉴 (선택 태그)에서 범주로 정렬됩니다. 선택 값이 변경되면 표시되는 li 마커 만지도에 채워지 길 원합니다.

선택 값이 변경되면 숨겨진 마커를 제거하는 데 도움이 필요합니다. 현재 li이 숨겨져 있으면 모든 마커가지도에 남아 있습니다. 내가 뭘 잘못하고 있는지 알 겠어?

JS : 그 도움이된다면 여기

$(document).ready(function(){ 
var licounter = 0; 

    $("#mapContent ul li").each(function(index) { 
     licounter ++; 
     if ($("#mapContent ul li:hidden")){ 
     markers.splice(licounter, 1); 
     licounter --; 
     }; 
    }); 
}); 
}); 

전체 코드입니다 : 어떻게 든

var mapStart = new google.maps.LatLng(41.8819,-87.823); 
var markers; 
var map; 
var infowindow = new google.maps.InfoWindow(); 

function initialize() { 
markers = new Array(); 
var mapOptions = { 
    zoom: 6, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    center: mapStart 
}; 

map = new google.maps.Map(document.getElementById("map"), 
     mapOptions); 



$("#mapContent ul li").each(function(index) { 

    var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng($(this).children(".marker_long").text(), $(this).children(".marker_lat").text()), 
    map: map, 
    animation: google.maps.Animation.DROP, 
    icon: 'images/marker.png', 
    title : $(this).children(".marker_title").text() 
    }); 

    markers.push(marker); 
}); 
} 

$(document).ready(function(){ 
var licounter = 0; 

$('select[name="mapCat"]').change(function(){ 

    var chosenCat =$(this).val();  
    $('#mapContent ul li').hide(); 
    $('#mapContent ul li.'+chosenCat).show(); 
    if (chosenCat == 'opt0'){ 
     $('#mapContent ul li').show(); 
    }; 


    $("#mapContent ul li").each(function(index) { 
     licounter ++; 
     if ($("#mapContent ul li:hidden")){ 
     markers.splice(licounter, 1); 
     licounter --; 
     }; 
    }); 
}); 
}); 

google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

, 당신은 후크 필터에 일 무슨 결정해야합니다. 예를 들어, 예/아니요 또는 특정 값으로 평가되는 항목 ...

그런 다음 해당 값을 마커에 할당 할 수 있습니다. 예를 들어, 마커를 만들 때 :

// Inside the for loop to create your markers. 
marker.set('id', results[i].id); 

이렇게하면 비교할 수있는 훅이 생깁니다.

모든 마커를 배열에 넣어야합니다. 필터 (입력 선택)이 같은 뭔가가 필요합니다 들어

var markerArray = []; 
... 
// Other marker setup. 
markerArray.push(marker); 

:

$(selector).on('change', function() { 
    var filter = $(this).val(); 
    for (var i = 0; i < that.plotMarkers.length; i++) 
    { 
     if (markers[i].YOUR_HOOK === filter || filter === '') 
     { 
      markers[i].setVisible(true); 
     } 
     else 
     { 
      markers[i].setVisible(false); 
     } 
    } 
}); 

간단히 말해서, 당신은 당신의 마커 '로 setVisible "를 사용해야합니다. 클러스터를 사용하는 경우

을 사용하여 "markerCluster.setIgnoreHidden"을 조사해야합니다.