google-maps-api-3 - 带有引导模式的全屏谷歌地图

Question

我有一张谷歌地图。当我点击一个标记时，我会显示一个带有 style="z-index:999999999999999999999999999"的引导模式。这里没有问题。但是，当我单击全屏按钮时，模式不再显示。它只在正常模式下工作。有什么解决方法的建议吗？

要查看示例，请参阅:http://jsfiddle.net/segato/e8w4wmh6/

var myCenter = new google.maps.LatLng(51.508742, -0.120850);

function initialize() {
var mapProp = {
    center: myCenter,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
    position: myCenter,
});
marker.setMap(map);

google.maps.event.addListener(marker, 'click', function () {

            $('#myModal').modal('show'); 
        });
}

google.maps.event.addDomListener(window, 'load', initialize);

单击标记。然后单击全屏图标，然后单击一个标记。

Answer 1

重点是全屏模式使用fullscreen API因此全屏元素之外的任何内容(在本例中为 map DIV)都保持向后。

解决方法是将模态元素附加到 map div，例如利用 custom controls API .

 map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById("myModal"));

查看工作 fiddle .

注意我禁用了模态背景，因为在 map 中出现了错误的 z 位置，位于模态顶部。如果您需要背景，我认为解决这个问题并不难。