Google Maps API实施点击事件以获取目标元素

Posted 2021-04-02

以下是有关Google地图API事件的问题：

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

}

在上面的代码中，我无法获得需要调用函数的e.target元素。

基本上情况是我有一个标记列表，点击其中一个，需要触发该功能，点击相同的标记，该功能应解除绑定。

谁能帮我这个？

答案

你好我曾经和过标记工作过，有点问题，我做过一些研究，发现这个解决方案在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
});

谢谢

另一答案

为了更准确地满足我的要求，我重新构建了我的查询并重新发布了相同的内容：

在我们的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;
            };