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

Pri*_*jan 5 google-maps map inspect google-maps-api-3

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

之前 在此输入图像描述

打开检查元素后.

在此输入图像描述

代码就在这里

<!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>
Run Code Online (Sandbox Code Playgroud)

小智 6

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

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

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

});
Run Code Online (Sandbox Code Playgroud)

idle 在平移或缩放后地图变为空闲时触发事件.

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


Man*_*nki 0

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

演示版