更新

Question

我有一个带有标记的Google地图。当用户单击标记时，通过向侧边栏元素添加类来滑出侧边栏。

现在，我想在用户点击地图上的某个位置时隐藏侧边栏。

我在地图上添加了一个点击事件监听器，但是当用户点击标记时它也会被触发。因此，侧边栏会立即显示和隐藏。

Marker事件监听器： maps.event.addListener(marker, 'click', markerClicked);

地图事件监听器： maps.event.addListener(map, "click", function() {

如何才能检测到地图上的点击？

--- --- EDIT

好的，请求一些代码：

对于我添加到地图的每个标记，我都会激活一个点击事件监听器，如下所示： google.maps.event.addListener(marker, 'click', markerClicked);

markerClicked函数包含以下代码，用于打开侧栏：

var markerClicked = function() {
    $('.sidebar--slide-in').addClass('sidebar--slide-in-active');
};

同样在创建地图时，我会激活地图的点击事件监听器，如下所示：

google.maps.event.addDomListener(map, "click", function() {

});

标记点击侦听器就像一个魅力。单击标记时，将返回单击的标记。单击地图时没有任何反应。

地图点击事件监听器会在单击地图时返回对象，但也会在单击标记时返回。

单击地图时（而不是单击标记时！）我想关闭侧边栏。我该怎么做？

---编辑2 ---

我没提到我使用自定义标记。我认为这不会以任何方式影响问题。看起来确实如此。我从@Dekel复制了codepen并在其中添加了自定义标记。

http://codepen.io/nieknijland/pen/QKyaxw

现在，当您单击标记时，将触发两个警报。我只想触发标记警报，而不是地图点击事件。

Answer 1

您可以查看此示例：
http://codepen.io/anon/pen/dpoqPK

这是代码（在代码段中不起作用）

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Simple markers</title>
        <style>
            html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            }
            #map {
            height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script>
            function initMap() {
                var myLatLng = {lat: -25.363, lng: 131.044};

                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 4,
                    center: myLatLng
                });

                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    title: 'Hello World!'
                });

                google.maps.event.addListener(marker, 'click', function() {
                    alert('Marker clicked')
                });

                google.maps.event.addDomListener(map, "click", function() {
                    alert('Map clicked')
                });
            }
        </script>
        <script async defer
        src="https://maps.googleapis.com/maps/api/js?callback=initMap">
        </script>
    </body>
</html>

确保在初始化地图后在地图上添加事件监听器

更新

如果您使用自定义标记并且想要在单击标记时阻止地图上的click事件，则可以在单击该标记时添加事件的stopPropagation功能：< / p>
google.maps.event.addDomListener(marker, 'click', function(event) { event.stopPropagation(); google.maps.event.trigger(self, 'click', event); });

这是一个更新的codepen：
http://codepen.io/anon/pen/RGAQdW

只需点击Google地图嵌入地图上的点击即可

1 个答案:

更新