Question

我已经在我的网站上集成了谷歌地图但是当我打开检查元素地图将工作，当我关闭地图将消失。请让我知道问题是什么

之前的 enter image description here

打开检查元素后。

enter image description here

代码在这里

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8 />
    <title>JS Bin</title>
</head>

<body>


    <input type="text" id="latitude" placeholder="latitude">
    <input type="text" id="longitude" placeholder="longitude">
    <div id="map" style="width:500px; height:500px"></div>


    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
        function initialize() {
            var $latitude = document.getElementById('latitude');
            var $longitude = document.getElementById('longitude');
            var latitude = -25.363882;
            var longitude = 131.044922;
            var zoom = 7;

            var LatLng = new google.maps.LatLng(latitude, longitude);

            var mapOptions = {
                zoom: zoom,
                center: LatLng,
                panControl: false,
                zoomControl: false,
                scaleControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            var map = new google.maps.Map(document.getElementById('map'), mapOptions);


            var marker = new google.maps.Marker({
                position: LatLng,
                map: map,
                title: 'Drag Me!',
                draggable: true
            });

            google.maps.event.addListener(marker, 'dragend', function (marker) {
                var latLng = marker.latLng;
                $latitude.value = latLng.lat();
                $longitude.value = latLng.lng();
            });


        }
        initialize();
    </script>

</body>

</html>

Answer 1

在创建标记或加载地图后放置此代码：

google.maps.event.addListenerOnce(map, 'idle', function () {

    google.maps.event.trigger(map, 'resize');

});

在平移或缩放后地图变为空闲时会触发

idle事件。

我们在地图变空后使用resize方法意味着所有加载都已完成。因此，代码等待地图空闲事件（当地图上的所有处理停止时）发生，然后执行resize方法，这会将地图重绘为正确的尺寸。

Answer 2

解释打开开发工具时会发生什么： 窗口的视口大小发生变化，窗口的大小调整事件将触发，并且将重新计算地图的大小。当您以任何其他方式调整窗口大小时，也会发生同样的情况。

与标签（http://jsfiddle.net/KhwZS/1300/）的使用相关： 地图选项卡最初是隐藏的（地图大小为0x0），当地图标签被激活时会触发窗口的调整大小事件（这会强制重新计算地图大小）：

$( ".tabs" ).tabs({
    activate: function( event, ui ) {if(ui.newPanel.has('#map-canvas')){
        google.maps.event.trigger(window,'resize',{});};}
});

演示：http://jsfiddle.net/KhwZS/1476/

由于目前还不清楚哪些代码在屏幕截图中创建了地图，我的答案是： 显示地图时触发窗口或地图的调整大小事件

Answer 3

地图加载后调用google.maps.event.trigger(map, "resize");，检查小提琴演示，

DEMO

当我打开检查元素时谷歌地图没有完全加载它将工作

3 个答案: