Javascript 如何在地图上高亮显示多个标记

侧边栏如何在谷歌地图上突出显示多个标记

我在右边有一个带有链接的专栏，当我点击测试时，我希望休斯顿和纽约的标记变成绿色

例如：

var映射；
var=[]；
var arrinfowns=[]；
函数mapInit（）{
var Latlng=新的google.maps.Latlng（37.09024，-95.712891）；
//var-Latlng=新的google.maps.Latlng（18.23，-66.39）；
变量映射选项={
缩放：4，
中心：拉特林，
disableDefaultUI:true
};      
map=new google.maps.map（document.getElementById（“map”）、mapOptions）；
$.getJSON（“/map.json”，{}，函数（数据）{
$.each（data.places，function（i，item）{
$（“#auteurs_liste”）。追加（“
”）；
var marker=new google.maps.marker({
位置：新建google.maps.LatLng（item.lat，item.lng），
地图：地图，
标题：item.title，
图标：（'http://maps.google.com/mapfiles/ms/icons/red-dot.png')
});
arrMarkers[item.id]=标记；
var contentMarker=[
'',
"测试",，
''
].加入（“”）；
var infowindow=new google.maps.infowindow({
内容：contentMarker
});
arrinfowns[item.id]=infowindow；
google.maps.event.addListener（标记'click'，函数（）{
$（“#auteur"+item.id）.css（'color'，'#941017'）；
信息窗口。打开（地图、标记）；
});
google.maps.event.addListener（标记'click'，函数（）{
arrmakers[item.id].setIcon（'http://maps.google.com/mapfiles/ms/icons/green-dot.png');
});                 
/*
google.maps.event.addListener（arrinfows[item.id]，'closeclick'，function（）{
arrmakers[item.id].setIcon（'http://maps.google.com/mapfiles/ms/icons/red-dot.png');
$（“#auteur#”+item.id）.css（“color”，#000”）；
});
*/          
});
});
}
$（函数（）{
mapInit（）；
$（“body”）。在（“click”、“auteurs\u liste a”上，函数（）{
VarI=$（this.attr（“rel”）；
对于（x=0；x

您的设计的一个问题是，您正在创建稀疏的标记数组。例如，如果输入数据为

    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
            }
        ]
    };

那么

数组的长度不是3而是334！所以元素
arrmakers[1]
是
未定义的。如果您想在单击时将图标从红色更改为绿色，则必须使用

$("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');

});

此外，没有
测试
元素。因此，如果您创建了一个，那么您必须迭代数组，找出未定义的元素，将它们与选定的城镇进行比较，然后更改图标。
谢谢，我会更改，但我看不到如何迭代数组。你有没有举个例子？
$("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');

});