Question

我正在使用谷歌地图api 3（JS），一切正常......有点，有一个重大问题困扰我发布。正如我所料，地图加载并显示在页面上。但是，所有图像，缩放控制左下角的Google徽标和推针图像都不会在每次页面加载时持续加载2分钟。我看过chrome dev工具中的页面加载和整个页面加载，然后坐了2分钟，然后剩余的7个图像在2分钟后加载，而列表中没有其他项目显示它可能已经停止或已经停止阻止请求。我使用Internet Explorer和Chrome网络浏览器从PC的Android手机等获得相同的结果。我也从我们的私人网络以及其他网络（个人和公共）测试了这个请帮助。提前谢谢！

以下是我的一些代码：

在页眉中生成api脚本：

// Setup google maps JS file
var script = document.createElement('script');
var asyncAttr = document.createAttribute('async');
var deferAttr = document.createAttribute('defer');
script.setAttributeNode(asyncAttr);
script.setAttributeNode(deferAttr);
script.setAttribute('type', 'text/javascript');
script.src = _googleMapJsPath;
document.getElementsByTagName("head")[0].appendChild(script);

生成（localhost没有密钥 - 服务器上存在密钥）：

<script async defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

然后我不在查询字符串中使用回调，因为我需要等到设置地图直到需要。而是在需要时初始化地图：

self.currentMap = new google.maps.Map(self.element, {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    scrollwheel: false
});

设置标记：

$.each(newMap.points, function (index, item) {
    if (item.latitude != 0 && item.longitude != 0) {
        var marker = new google.maps.Marker({
            position: {lat: item.latitude, lng: item.longitude},
            map: self.currentMap,
            optimized: false
        });

        self.markers.push(marker);
    }
});

这是HTML元素：

<div id="mapDiv" class="map-container"></div>

以下是DIV上课程的CSS：

.map-container {
    width: 580px;
    height: 580px;
}

Answer 1

这是仅在您的计算机或多个设备，浏览器上发生的吗？这将是一个奇怪的答案，但我已经禁用了萤火虫，如果你有萤火虫，它对我来说很好。此外，由于我没有看到您的代码，您的JScript文件在顶部或底部的哪个位置？这可能会改变优先事项。我只是猜测你到目前为止所提供的内容。

Answer 2

我们已经发现这个问题特定于我们用于此应用程序的自定义JS框架。我们的地图按照预期在3页中的2页上运行。我们只需纠正1问题页面上的挂起问题。谢谢大家！

谷歌地图JS API - 地图图块加载但所有图像（标记，缩放控制等）都不会加载2分钟

2 个答案: