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/）时，会初始化地图，当用户点击标记时，会动态创建其叠加层并将其推送到页面。特别是关闭按钮div。意思是浏览器对关闭按钮（或其上的事件）一无所知，除非用户点击标记。

简而言之，您的事件永远不会被解雇，因为您在map.js加载时可用的.dismis-overlay div上注册了事件（＆amp;没有，因为您动态创建它们）。

因此，要解决您的问题，请尝试更改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 = “$（本）.parent（）切换（）;”

不确定是否有使用gmap3插件的具体原因。如果我是你，我会使用没有它的谷歌地图api，给你更多的控制权。如果你真的需要聚类，我会去传单。

OLD ANSWER（见评论）

而不是父母，只需在事件中提及id：

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

另一方面，我尝试淡出，当暗背景仍然存在时，它会淡化模态。关闭模态的标准方法是使用切换而不是淡出。

希望这会有所帮助。：）

谷歌地图（gmap3插件），点击时淡出覆盖

1 个答案: