Google maps 当我打开inspect元素时，Google地图没有完全加载，它将正常工作_Google Maps_Google Maps Api 3_Map_Inspect

Google maps 当我打开inspect元素时，Google地图没有完全加载，它将正常工作

google-maps google-maps-api-3 map

Google maps 当我打开inspect元素时，Google地图没有完全加载，它将正常工作,google-maps,google-maps-api-3,map,inspect,Google Maps,Google Maps Api 3,Map,Inspect,我已经在我的网站上集成了一个谷歌地图，但当我打开它时，元素地图就会工作，当我关闭它时，地图就会消失。请告诉我有什么问题以前打开后检查元件代码在这里 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <input type="te

我已经在我的网站上集成了一个谷歌地图，但当我打开它时，元素地图就会工作，当我关闭它时，地图就会消失。请告诉我有什么问题

以前

打开后检查元件

代码在这里

<!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>


JS-Bin
函数初始化（）{
var$latitude=document.getElementById（'latitude'）；
var$longitude=document.getElementById（'longitude'）；
var纬度=-25.363882；
var经度=131.044922；
var=7；
var LatLng=新的google.maps.LatLng（纬度、经度）；
变量映射选项={
缩放：缩放，
中心：拉特林，
泛控制：错误，
动物控制：错误，
scaleControl：对，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（'map'），mapOptions）；
var marker=new google.maps.marker({
位置：LatLng，
地图：地图，
标题：“拖我！”，
德拉格布尔：是的
});
google.maps.event.addListener（标记，'dragend'，函数（标记）{
var latLng=marker.latLng；
$latitude.value=latLng.lat（）；
$longitude.value=latLng.lng（）；
});
}
初始化（）；

调用

google.maps.event.trigger（映射，“调整大小”）地图加载后，检查小提琴演示
要解释打开开发工具时发生的情况：
窗口的视口大小将更改，窗口触发的调整大小事件和贴图大小将重新计算。以任何其他方式调整窗口大小时也会发生同样的情况
与选项卡（）的使用相关：
地图选项卡最初是隐藏的（地图大小为0x0），激活地图选项卡后触发窗口的调整大小事件（这将强制重新计算地图大小）：
演示：
由于还不清楚是哪种代码在截图中创建了地图，我的答案是：
显示地图时触发窗口或地图的调整大小事件创建标记或加载地图后放置此代码：
google.maps.event.addListenerOnce(map, 'idle', function () {

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

});

当地图在平移或缩放后变为空闲时，将触发idle
事件
我们正在使用resize
方法，在地图变为空闲后意味着所有加载都完成。因此，代码等待map idle事件（当map上的所有处理都停止时）发生，然后执行resize
方法，这会将地图重新绘制到正确的尺寸。
一些代码会很有趣添加的代码显然不是屏幕快照中用于创建地图的代码不要直接调用initialize
函数。为加载窗口时添加事件侦听器：google.maps.event.addDomListener（窗口“加载”，初始化）请检查下面的链接，我面临同样的问题，我有2个标签页
google.maps.event.addListenerOnce(map, 'idle', function () {

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

});