javascript - Google map (gmap3 插件)，点击时淡出叠加

Question

我有一个使用 gmap3 插件构建的谷歌地图应用程序，该应用程序在单击标记时绘制动态叠加层。我正在尝试在覆盖层内创建一个按钮，以使用脚本中的这一行“关闭”覆盖层:

$('.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/ ) 上的“更多信息”按钮时， map 将被初始化，并且当用户单击标记时，将动态创建其叠加层并将其推送到页面。特别是关闭按钮 div。这意味着浏览器不知道有关关闭按钮(或其上的事件)的任何信息，除非用户单击标记。

简而言之，您的事件永远不会被触发，因为您在 .dismis-overlay div 上注册了在 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 插件是否有特定原因。如果我是你，我会使用没有它的谷歌地图 api，给你更多的控制权。如果您确实需要聚类，我会选择传单。

<小时/>

旧答案(参见评论)

<小时/>

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

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

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

希望这有帮助。 :)