Question

我有谷歌地图。当我点击一个标记时，我会显示一个带有样式=＆＃34; z-index：999999999999999999999999999＆＃34;的引导模态。这里没问题。但是，当我单击全屏按钮时，模式不再显示。它只能在正常模式下工作。有任何建议如何解决这个问题？

要查看示例，请参阅：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，因此全屏元素之外的所有内容（在本例中为地图DIV）保持向后。

一种解决方法是将模式元素附加到map div，例如利用custom controls API。

std::vector

请参阅工作fiddle。

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

谷歌地图全屏与bootstrap模式

1 个答案: