API Карт Google Реализация события клика для получения целевого элемента - PullRequest
Новая
       8

API Карт Google Реализация события клика для получения целевого элемента

0 голосов
/ 30 января 2019

Вот вопрос о событиях API карт Google: 

marker.addListener('click', _.bind(function (e) {

}

В приведенном выше коде я не могу получить элемент e.target, для которого мне нужно вызвать функцию.

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

Может ли кто-нибудь помочь мне с этим?

Ответы [ 2 ]

0 голосов
/ 03 февраля 2019

Чтобы быть более точным с моими требованиями, я реструктурировал свои запросы и сделал то же самое:

В нашей реализации карт Google у нас есть следующие требования:

• Получение целевого элемента, которыйщелкает маркер, из всех отображаемых на экране • Увеличьте маркер после щелчка и примените класс только к этому конкретному маркеру (кликнул маркер)

Мы написали следующий код, но он не дает вышеРезультаты.Тем не менее, аналогичное взаимодействие работает при наведении указателя всплывающей подсказки с деталями

Фрагмент кода: 

            ReferenceMap.prototype.showPoint = function showPoint(point, map) {
                var location = point.get('location')
                    , marker = new google.maps.Marker({
                        store_id: point.get('internalid')
                        , icon: iconSrc
                        , map: map
                        , point: point
                        , title: point.get('internalid')
                    });

                allMarker.push(marker);
                marker.setPosition(new google.maps.LatLng(location.latitude, location.longitude));
                marker.setVisible(true);

                marker.addListener('mouseover', _.bind(function () {
                    this.showInfoWindowOnClick(marker, map);
                }, this));
                marker.addListener('mouseout', _.bind(function () {
                    hideShowInfoWindow();
                }, this));


                marker.addListener('click', _.bind(function (e) {
                    // var markerTitle = marker.title;
                    // var markerID = marker.store_id;
                    // var target = markerTitle == markerID;
                    // if(target == e.target) {
                    //  $('.marker img').css('width',200);
                    //  dealerDetailsLeftBlock();
                    // }
                    // else {
                    //  $('.marker img').removeAttr('style');
                    // }

                    console.log(e.target);

                    areaMarkers.reset();
                    for (var i = 0; i < allMarker.length; i++) {
                        allMarker[i
                        ].isClicked = 'F';
                        allMarker[i
                        ].point.set('isClicked', 'F');
                        marker.set('isClicked', 'T');
                        if (map.getBounds().contains(allMarker[i
                        ].getPosition())) {
                            //console.log(allMarker[i]);
                            if (allMarker[i
                            ].isClicked == 'T') {

                                $('[title="' + marker.title + '"
                                ]').addClass('marker - design');
                                        console.log($('[title="' + marker.title + '"
                                ]'))
                                        // console.log(allMarker[i]);
                                        allMarker[i
                                        ].point.set('isClicked', 'T');
                            }
                            areaMarkers.add(allMarker[i
                            ].point);
                        }
                    };
                    //console.log(areaMarkers);
                    dealerDetailsLeftBlock();
                    this.trigger('getSideBar')
                }, this));
                if (this.markerCluster) {
                    this.markerCluster.addMarker(marker);
                }
                return marker;
            };
0 голосов
/ 30 января 2019

Здравствуйте, я работал с маркером в прошлом, и у меня была такая же проблема, я провел некоторое исследование и нашел это решение для SO, и оно сработало.

Вы можете создать такую ​​функцию 

function createCallback(marker, callback) {
    google.maps.event.addListener(marker, 'click', function () {
     // do whatever you want to do
     callback()
    });
}

И после этого назовите это вот так 

var markerPropertyLocation = new google.maps.Marker({
    position: {markerPosition},
    map : {map},
    icon: new google.maps.MarkerImage(
            {iconImage},
            null, /* size is determined at runtime */
            null, /* origin is 0,0 */
            null, /* anchor is bottom center of the scaled image */
            new google.maps.Size(20, 27))
});
createCallback(markerPropertyLocation, function(){
 // callback funcation
});

Спасибо

...