Google 地图拖动标记会向另一个标记添加边框

Question

我刚刚尝试在地图上添加一个主要的可拖动标记。我面临的问题是，一旦您拖动黑色标记，它就会为已放置在地图上的现有标记之一创建蓝色轮廓。我不知道它为什么这样做。我已经隔离了实际执行此操作的代码位，即我添加到每个标记的单击事件侦听器，一旦我删除了这个小代码片段，它就不会向任何标记添加蓝色轮廓标记不再。需要注意的是，我还尝试注释掉对此单击处理程序上两个内部函数的调用，但这似乎无法解决问题，因此不可能是这些函数造成的。

这也不是浏览器问题，因为 safari 和 chrome 上都会出现蓝色轮廓。

                    marker.addListener('click',
                            function() {
                                openCloseNav(true);
                                car_park_details(marker);
                            }); 

（在最右边的标记上）

我在下面添加了大部分 JavaScript。

        var markers = [];
        var geocoder;
        var map;
        var mainMarker;

        function initMap() {
            geocoder = new google.maps.Geocoder();

            var defaultCoord = {
                lat : 51.600960,
                lng : -0.275770
            };

            map = new google.maps.Map(document.getElementById('map'), {
                zoom : 15,
                center : defaultCoord,
                minZoom : 14,
                streetViewControl : false,
                controlSize : 33,
                gestureHandling : 'greedy',
                mapTypeControlOptions : {
                    mapTypeIds : []
                },
                styles : [ {
                    "featureType" : "all",
                    "elementType" : "all",
                    "stylers" : [ {
                        "hue" : "#008eff"
                    } ]
                }, {
                    "featureType" : "road",
                    "elementType" : "all",
                    "stylers" : [ {
                        "saturation" : "0"
                    }, {
                        "lightness" : "0"
                    } ]
                }, {
                    "featureType" : "transit",
                    "elementType" : "all",
                    "stylers" : [ {
                        "visibility" : "off"
                    } ]
                }, {
                    "featureType" : "water",
                    "elementType" : "all",
                    "stylers" : [ {
                        "visibility" : "simplified"
                    }, {
                        "saturation" : "-60"
                    }, {
                        "lightness" : "-20"
                    } ]
                } ]

            });

            mainMarker = new google.maps.Marker({
                    map,
                 position: defaultCoord,
                 draggable: true,
                 icon : {
                        url : 'mainmarker.png',
                        scaledSize : new google.maps.Size(30, 30),
                        origin : new google.maps.Point(0, 0),
                    }  
                
             });
            
            google.maps.event.addListener(map, 'tilesloaded',
                    find_closest_markers);
            google.maps.event.addListener(mainMarker, 'dragend',
                    find_closest_markers);

        }


        function geocodeEncapsulation(i) {

            return (function(results, status) {

                if (status == 'OK') {
                
                    var marker = new MarkerWithLabel({
                        map : map,
                        position : results[0].geometry.location,
                        icon : {
                            url : 'pin.png',
                            scaledSize : new google.maps.Size(40, 30),
                            //origin : new google.maps.Point(0, 0),
                        },
                        clickable: true,

                        labelContent : '£' + i.price.toFixed(2),
                        labelAnchor : new google.maps.Point(30, 35),
                        labelClass : "markerdesign",
                        labelInBackground : false,
                        title : i.name
                    });
                    marker.set("carpark", i);
                    


                    marker.addListener('mouseover',
                            function() {
                                marker.set("labelClass",
                                        "markerdesignhover");
                            });
                    marker.addListener('mouseout',
                            function() {
                                marker.set("labelClass", "markerdesign");
                            }); 
                    marker.addListener('click',
                            function() {
                                openCloseNav(true);
                                car_park_details(marker);
                            }); 
                    markers.push(marker);

                } else {
                    //console.log(status);
                }

            });
        }

简化版本在Fiddle上，拖动中心标记 http://jsfiddle.net/qn23wxmL/2/

Answer 1

也许一些CSS可以解决你的问题？

* { outline:none; }

如果这有效，请使用确切的元素对其进行优化（如果您可以使用类或 id 找到它）：

#map div:focus { outline:none; }

Answer 2

更新：

向可拖动标记添加单独的单击侦听器可以解决该问题。 不过我不明白这是如何工作的，如果有人能解释一下，那就太好了。