Как добавить один и тот же слушатель событий для многих маркеров, а затем провести различие между маркерами в слушателях в Google Maps API v3?

Question

У меня один и тот же прослушиватель событий для многих маркеров в моем JavaScript. Как мне различить разные маркеры в этом слушателе? Я хочу отобразить другой маркер в другом месте при нажатии определенного маркера. У каждого маркера есть свой маркер, который я показываю при нажатии на него.

код прослушивателя событий

google.maps.event.addListener(marker, 'click', function() {
//code goes here

});

подробнее:

У меня есть 2 массива маркеров1 и маркеров2, каждый из которых имеет 10 маркеров. Я отображаю 10 из маркеров1 на моей карте. При нажатии маркера markers1 [0] я хочу отобразить маркер markers2 [0] на карте. Как мне узнать в прослушивателе событий, что я нажал на markers1 [0], теперь я знаю, что могу использовать ЭТО для идентификации маркеров1 [0], но как мне узнать в слушателе, что это был маркер в позиции 0 в массиве markers1, чтобы я также мог отображать маркер в позиции 0 в массиве markers2?

Answer 1

На самом деле у вас нет одного и того же слушателя для каждого маркера или, по крайней мере, не одна и та же функция обработчика; у вас просто тот же код.

В JavaScript функции являются первоклассными объектами, и во всех ответах, опубликованных до сих пор, для каждого маркера создается отдельная функция. Это пустая трата памяти.

Вот то, что я думаю, вы хотите:

var myMarkerClickHandler = function() {
    // use the keyword 'this' to access the marker that got clicked
    console.debug('Marker for ' + this.arrDestination.title + ' got clicked!');
    console.debug('Its position is ' + this.position);
}

for (i = 0; i < arrDestinations.length; i++) {
    // create a marker
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(arrDestinations[i].lat, arrDestinations[i].lon),
        // as @john-black says, you can add whatever properties you like to the marker
        arrDestination: arrDestinations[i]
    });

    // add *the* event handler to this marker
    google.maps.event.addListener(marker, 'click', myMarkerClickHandler);
}

Answer 2

Вы можете легко добавить индекс (или любую другую информацию) к каждому Маркеру:

for( var i = 0; i < arrDestinations; i += 1 ) {
    var marker = new google.maps.Marker({
        title: arrDestinations[i].title,
        position: new google.maps.LatLng(arrDestinations[i].lat, arrDestinations[i].lon),
        map: map,
        myIndex: i    // ADDED FIELD: Each marker contains its index
    )};
    bindInfoWindow(marker,map,infowindow,"<p>arrDestinations[i].description + "</p>");
}

Затем в своем обработчике событий вы можете сделать это:

google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(html);
    infowindow.open(map, marker);
    setVisibility(marker);  // ADDED
});

Функция setVisibilityбудет аналогичен предложенному выше 150PoundsOfDonamite, за исключением того, что вы знаете индекс маркера, который хотите сделать видимым:

function setVisible(marker) {
    for(var i=0; i<markers1.length; i++) {
        if(i==marker.myIndex) {
            markers2[i].setVisible(true);
        } else {
            markers2[i].setVisible(false);
        }
    }
}

Answer 3

Что вы можете сделать, так это иметь внешнюю функцию, которая обрабатывает добавление маркеров / информационных окон (см. Комментарий 150PoundsOfDonamite). По совпадению я написал сегодня сообщение в блоге , в котором показано, как это сделать.

<script type="text/javascript">
function initialize() {
    var i;
    var arrDestinations = [
        {
            lat: 50.815155,
            lon: -0.137072,
            title: "Brighton Pier",
            description: "Brighton Palace Pier dates to 1899"
        },
        {
            lat: 50.822638,
            lon: -0.137361,
            title: "Brighton Pavilion",
            description: "The Pavilion was built for the Prince of Wales in 1787"
        },
        {
            lat: 50.821226,
            lon: -0.139372,
            title: "English's",
            description: "English's Seafood Restaurant and Oyster Bar"
        }
    ];

    var myOptions = {
        zoom: 15,
        center: new google.maps.LatLng(50.820645,-0.137376),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

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

    // loop over our array
    for (i = 0; i < arrDestinations.length; i++) {
        // create a marker
        var marker = new google.maps.Marker({
            title: arrDestinations[i].title,
            position: new google.maps.LatLng(arrDestinations[i].lat, arrDestinations[i].lon),
            map: map
        });

        // add an event listener for this marker
        bindInfoWindow(marker, map, infowindow, "<p>" + arrDestinations[i].description + "</p>");
    }
}

function bindInfoWindow(marker, map, infowindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(html);
        infowindow.open(map, marker);
    });
} 

google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 4

function yourlistener(usedMarker)
{
    // in the var usedMarker you have the reference to the single marker
}

for(var x=0;x<markers.length;x++)
(function(marker){

   google.maps.event.addListener(marker, 'click',
   function() { yourlistener(marker); });}

)(markers[x]);

как то так?надеюсь, это поможет

Answer 5

Вы имеете в виду, что переменная marker является массивом маркеров?Или вы имеете в виду, что ваш код дублируется для каждого маркера?Потому что, если последнее так, то при каждом вызове addListener this ссылается на рассматриваемый маркер.

Обновление после комментариев

Хорошо, тогда выможет использовать функцию, которая просто проходит через ваш marker1:

function setVisible(marker) {
    for(var i=0; i<markers1.length; i++) {
        if(marker==markers1[i]) {
            markers2[i].setVisible(true);
        } else {
            markers2[i].setVisible(false);
        }
    }
}   

Тогда определение каждого отдельного прослушивателя кликов будет выглядеть так:

google.maps.event.addListener(marker, 'click', function() {
    setVisible(this);
});

Однако вы не хотитесделать что-то подобное 10 раз, поэтому вам нужно поместить это в шаблон, подобный следующему:

for(var i=0; i<marker1Data.length; i++) {
    marker = new google.maps.Marker({
        map: theMap,
        position: marker1Data[i].latLng,
        visible: true
    })

    marker1.push(marker);

    google.maps.event.addListener(marker, 'click', (function(marker) {
        return function() {
            setVisible(marker);
        }
    })(marker));
}

Где marker1Data - это просто массив объектов LatLng, которые определяют местоположение каждого маркера в marker1,И, конечно, цикл for для marker2, но с visible: false.