javascript - Google map 在页面加载时未初始化

Question

我正在使用 googleMaps API javascript，有时它运行良好，但有时我重新加载页面，然后在浏览器的控制台点击中出现异常，并且 map 不显示。

未捕获的数控js?key=MyAPIKey&callback=initMap:98我的 JavaScript 代码:

    <script async defer
                src="https://maps.googleapis.com/maps/api/js?key=NyAPIKey&callback=initMap">
        </script>

function initMap() {
        if (typeof google === 'object' && typeof google.maps === 'object') {
            // Create the map.
            var map = new google.maps.Map(document.getElementById('googleapi'), {
                zoom: 14,
                center: { lat: @Model.SelectedAppliance.Lat, lng: @Model.SelectedAppliance.Lon },
                mapTypeId: 'terrain'
            });

            var marker = new google.maps.Marker({
                position: map.center,
                map: map,
                title: 'Device Home'
            });

            // Construct the circle for each value in citymap.
            // Note: We scale the area of the circle based on the population.
            var positionCircle = new google.maps.Circle({
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35,
                map: map,
                center: map.center,
                radius: getMeters(@Model.SelectedAppliance.TriggerMile),
            });

            return positionCircle;
        } else {
            window.location.reload(true);
        }

    }

    function ContainPoint(device, lat, lon) {
        if (typeof google === 'object' && typeof google.maps === 'object') {
            markerCPosition = new google.maps.LatLng(lat, lon);
            var circleBounds = initMap().getBounds();
            if (!circleBounds.contains(markerCPosition)) {
                $(device).hide(true);
            }
        } else {
            window.location.reload(true);
        }
    }

Answer 1

现在是 2016 年，如果您没有在客户端 Javascript 上使用解锁异步和延迟标记，则需要干预。

If the async attribute is present, then the script will be fetched in parallel to parsing and evaluated as soon as it is available (potentially before parsing completes).

If the async attribute is not present but the defer attribute is present, then the classic script will be fetched in parallel and evaluated when the page has finished parsing.

如果这两个属性都不存在，则立即获取并评估脚本，阻止解析，直到这些属性都完成，从而使一切变得缓慢且糟糕。

我们添加两者是因为并非所有浏览器都支持异步，而 defer 可以作为这些旧版浏览器的后备方案。

如果存在异步，则脚本将在可用时立即执行，但不会阻止进一步解析页面。如果 async 不存在但 defer 存在，则当页面解析完成时执行脚本。