Question

我正在使用googleMaps API javascript，有时它运行良好但有时我重新加载页面然后我在浏览器的控制台中点击了一个例外并且地图没有显示。

Uncaught nc ？JS键= MyAPIKey＆安培;回调= 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上使用解除阻止的异步和延迟标记，则需要进行干预。

如果存在async属性，则将获取脚本   并行解析并在可用时立即进行评估   （可能在解析完成之前）。

如果async属性不存在但defer属性为   目前，经典脚本将并行获取   在页面完成解析时进行评估。

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

我们添加两者都是因为所有浏览器都不支持async，而defer则作为这些旧版浏览器的后备。

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

Answer 2

您是否尝试删除异步？

GoogleMaps无法在页面加载时进行初始化

2 个答案: