지도에서 여러 마커를 강조 표시하는 방법

Question

Google지도에서 여러 마커를 강조 표시하는 방법은 무엇입니까?

나는 링크와 함께 오른쪽에 열이 나는 테스트를 클릭하면, 나는 휴스턴과 뉴욕

예를 녹색으로 마커를 좋아하는 것 : 당신의 디자인 http://imgur.com/DPr9yeD

var map; 
var arrMarkers = []; 
var arrInfoWindows = []; 

function mapInit(){  
var Latlng = new google.maps.LatLng(37.09024,-95.712891); 
//var Latlng = new google.maps.LatLng(18.23, -66.39); 
var mapOptions = { 
    zoom: 4, 
    center: Latlng, 
    disableDefaultUI: true 
};  

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

$.getJSON("/map.json", {}, function(data){ 
    $.each(data.places, function(i, item){ 
     $("#auteurs_liste").append('<li><a href="#" rel="' + item.id + '" id="auteur_'+item.id+'">' + item.title + '</a></li>'); 
     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(item.lat, item.lng), 
      map: map, 
      title: item.title, 
      icon:('http://maps.google.com/mapfiles/ms/icons/red-dot.png') 
     }); 

     arrMarkers[item.id]= marker; 

     var contentMarker = [ 
       '<div id="hook">', 
       'test', 
       '</div>' 
      ].join('');   

     var infowindow = new google.maps.InfoWindow({ 
      content: contentMarker 
     }); 

     arrInfoWindows[item.id] = infowindow; 

     google.maps.event.addListener(marker, 'click', function() { 
      $("#auteur_"+item.id).css('color','#941017'); 
      infowindow.open(map, marker); 
     }); 

     google.maps.event.addListener(marker, 'click', function() { 
      arrMarkers[item.id].setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png'); 
     });     
     /* 
     google.maps.event.addListener(arrInfoWindows[item.id],'closeclick',function(){ 
      arrMarkers[item.id].setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png'); 
      $("#auteur_"+item.id).css("color",'#000'); 
     }); 
     */   

    }); 

}); 
} 

$(function(){ 
mapInit();  
$("body").on("click", "#auteurs_liste a", function(){ 
    var i = $(this).attr("rel"); 
    for(x=0; x < arrInfoWindows.length; x++){ 
     //arrInfoWindows[x].close(); 
     //arrMarkers[x].setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png'); 
     //$("#auteur_"+x).css("color",'#000'); 
    } 
    //$("#auteur_"+i).css("color",'#941017'); 
//test force 1 
arrMarkers[1].setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png'); 
}); 
}); 

Answer 1

한 가지 문제가 있다는 것입니다 드문 드문 한 마커 배열을 만들고 있습니다. 입력 데이터가있는 경우

var data = { 
     places: [ 
      { 
       id: 111, 
       title: 'New York', 
       lat: 40.714353, 
       lng: -74.005973 
      }, 
      { 
       id: 222, 
       title: 'Los Angeles', 
       lat: 34.052234, 
       lng: -118.243685 
      }, 
      { 
       id: 333, 
       title: 'Houston', 
       lat: 29.760193, 
       lng: -95.369390 
      } 
     ] 
    }; 

예컨대 다음 arrMarkers 배열의 길이는 3이지만 334 아니다! 따라서 arrMarkers[1] 요소는 undefined입니다. 당신이 클릭에 녹색으로 빨간색에서 아이콘을 변경하려는 경우 당신은 또한

$("body").on("click", "#auteurs_liste a", function(){ 
    var i = $(this).attr("rel"); 

    arrMarkers[i].setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png'); 

}); 

를 사용하는 것보다, test 요소는 없다. 따라서 하나를 만들면 arrMarkers 배열을 반복하고 정의되지 않은 요소를 찾아 선택한 마을과 비교 한 다음 아이콘을 변경해야합니다.