如何在地圖上突出顯示多個標記

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數組，找出未定義的元素，將它們與選定的城鎮進行比較，然後更改圖標。