嵌入式 Google 地图图块在 Firefox 第二页加载时未加载，直到缩放

Question

我正在为交互式 Web 应用程序嵌入 Google 地图。地图在 Chrome 中加载良好，这是有道理的。该地图在 Firefox 中有一个稍微恼人的图块加载问题。

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

在 Firefox 中，地图总是在第一个页面加载或页面刷新时加载。当从导航栏导航到完全相同的页面（第二页加载？）时，地图图块很可能没有按应有的方式加载，您会看到如下所示的灰色图块。

向上或向下移动地图会加载初始地图中心上方和下方的图块，但不会加载原始地图中心。

触发加载灰色图块的唯一方法是更改缩放比例。

我已经尝试通过以下代码使用缩放触发器，但它并不总是有效。在每次加载页面时放大和缩小地图看起来也不是最好的。

setTimeout(function() {
    internal.map.setZoom(internal.map.getZoom() + 1);

    setTimeout(function() {
        internal.map.setZoom(internal.map.getZoom() - 1);
    }, 200);
}, 200);

有没有办法解决这个问题而不用烦人的缩放技巧？

我复制了 Google Maps basic sample page 并在顶部添加了一个 link，link 属于它自己。这可以通过保存为 html 文件并在 Firefox 中打开，单击 link 几次来测试。

<!DOCTYPE html>
<html>
    <head>
        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <style>
            /* Always set the map height explicitly to define the size of the div
            * element that contains the map. */
            #map {
                height: 100%;
            }
            /* Optional: Makes the sample page fill the window. */
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <div style="height:5rem;text-align:center">
            <a href=".">Link reference (click me!)</a>
        </div>
        <div id="map"></div>
        <script>
            var map;
            function initMap() {
                map = new google.maps.Map(document.getElementById('map'), {
                    center: {lat: -34.397, lng: 150.644},
                    zoom: 8
                });
            }
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAa-o55aIMt4YC0mhPyp8WfGql5DVg_fp4&callback=initMap"
        async defer></script>
    </body>
</html>

Answer 1

已在 Firefox 68.0.2 中修复，请尝试更新后的版本。

嵌入式 Google 地图图块在 Firefox 第二页加载时未加载，直到缩放

Embedded Google Maps tiles not loading in Firefox second page load until zoomed

javascript

firefox

google-maps

google-maps-api-3