如何在地图上突出显示多个标记

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数组，找出未定义的元素，将它们与选定的城镇进行比较，然后更改图标。