Google 地图（gmap3 插件），点击时淡出叠加

Question

我有一个 google 地图应用程序，它使用 gmap3 插件构建，单击标记时会绘制动态叠加层。我正在尝试使用脚本中的这一行在叠加层内制作一个按钮 "dismiss" 叠加层：

$('.dismiss-overlay').click(function() {
    $(this).parent('div').fadeOut();
})

我已经对此进行了测试，当放置在 gmap 覆盖层之外时，一切似乎都运行良好，但是当在覆盖层内单击按钮时，什么也没有发生。以下是完整的脚本：

$("#map_canvas").gmap3({
        map:{
            options:{
                streetViewControl: false,
                mapTypeControl: false,
                zoom: 0
            }
        },
        marker:{
            values: markers,
            options:{
                draggable: false,
                icon: "files/map-marker.png"
            },
            events:{
                click: function(marker, event, context) {
                    $(this).gmap3({
                        clear:"overlay",
                        overlay: {
                            latLng: marker.getPosition(),
                            options: {
                                content: '<div class="container overlay"><button class="btn btn-xs dismiss-overlay">x close</button>'+$("#"+context.data.id).html()+'</div>',
                                offset: {
                                    y: -30,
                                    x: 30
                                }
                            }
                        },
                    });
                    $(this).gmap3('get').panTo(marker.getPosition());
                    $(this).gmap3('get').panBy(150, 0);
                }
            }
        },
        autofit:{maxZoom: zoom},
    });
});

如果您需要查看工作示例：http://schaffner-publications.com/development/map/

Answer 1

好的，我找到问题了。问题是您正在动态创建叠加层，并且您的事件侦听器是在 map.js 文件加载期间注册的。当用户单击示例页面 (http://schaffner-publications.com/development/map/) 上的 'More info' 按钮时，地图将被初始化，当用户单击标记时，其叠加层将动态创建并推送到页面。特别是关闭按钮 div。这意味着除非用户点击标记，否则浏览器对关闭按钮（或其上的事件）一无所知。

简而言之，您的事件永远不会被触发，因为您在 .dismis-overlay divs 上注册了在 map.js 加载时可用的事件（并且在您创建时没有任何事件他们动态）。

因此，要解决您的问题，请尝试将设置覆盖内容的 map.js 更改为以下内容。

content: '<div class="container-fluid overlay"><button class="btn btn-xs dismiss-overlay" onclick="$(this).parent().toggle();">x close</button>'+$("#"+context.data.id).html()+'</div>',

我已在下面添加到您的代码中：

onclick="$(this).parent().toggle();"

不确定是否有使用 gmap3 插件的特定原因。如果我是你，我会在没有它的情况下使用 google map api，让你有更多的控制权。如果你真的需要集群，我会选择传单。

旧答案（查看评论）

不用父级，只需在事件中提及 id:

$('.dismiss-overlay').click(function() {
   $('#parkmap').modal('toggle');
})

另一方面，我尝试淡出，它只是淡出模态，而深色背景仍然存在。关闭模式的标准方法是使用切换而不是淡出。

希望这对您有所帮助。 :)

Google 地图（gmap3 插件），点击时淡出叠加

Google Maps (gmap3 plugin), fadeout overlay on click

javascript

jquery

google-maps

jquery-gmap3