Question

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

我右侧有一个链接列，当我点击测试时，我希望标记休斯顿和纽约变成绿色

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

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

1 个答案: