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

У меня есть один и тот же прослушиватель событий для многих маркеров в моем 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 в массиве маркеров1, чтобы я также мог отобразить маркер в позиции 0 в массиве маркеров2?

Источник

5 ответов

Решение

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

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);
        }
    }
}
Источник

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

В 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);
}
Источник 
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]);

что-то вроде этого? надеюсь это поможет

Источник

Что вы можете сделать, так это иметь внешнюю функцию, которая обрабатывает добавление маркеров / информационных окон (см. Комментарий 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>
Источник

Вы имеете в виду, что 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, И, конечно, для цикла для marker2, но с visible: false,

Источник
Другие вопросы по тегам