javascript - 谷歌地图 V3 在更改后使用媒体查询调整大小而不是居中

Question

我在空白页上有以下 map 代码:

<div id="map"></div>

<script>

    var map;

    function initMap() {
        var myLatLng = {lat: -25.363, lng: 131.044};

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 4,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: 'Business Location'
        });
    }

    google.maps.event.addDomListener(window, 'load', initMap);

    google.maps.event.addDomListener(window, "resize", function() {
        var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
    });

</script>

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

我希望 map 在浏览器宽度上更改为设定大小，如下所示:

#map {     // Full screen
  height: 100%;
  min-height: 400px;
  width: 100%;
  max-width: 970px;
  margin-left: 5px;
}

@media only screen and (max-width: 1281px) {    // Smaller width screen
  #map {
    width: 480px;
  }
}

调整大小通过媒体查询进行，但不会触发 map 重新加载/居中。

我收到以下错误:

Uncaught ReferenceError: google is not defined

经过进一步研究，我了解到在 initMap 运行之前无法调用任何映射方法(因为这是异步加载)。不知道如何解决这个问题。谢谢!

Answer 1

我可以看到您的代码存在两个主要问题。首先，您在两个不同的地方调用 initMap 函数:

加载google maps JS时的回调参数:

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

还有窗口加载:

google.maps.event.addDomListener(window, 'load', initMap);

不要那样做，只能使用这些方法中的一种，否则你会调用该函数两次，创建两个映射，这只会导致问题。

其次，您创建一个global map 变量，当您执行var map; 时，这很好。然而，您随后在 initMap 函数中创建了一个新的 local 变量，它只能被该函数访问:

var map = new google.maps.Map(...)

因此，当您尝试在事件监听器中再次访问它以调整 map 大小(使用 map.getCenter() 等)时，您得到的只是global 变量，此时它是一个空对象，而不是 local 变量，它是实际的 Map 对象。

这是我要将您的代码修改为:

<script>
    var map;

    function initMap() {
        var myLatLng = {lat: -25.363, lng: 131.044};

        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 4,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: 'Business Location'
        });
    }

    google.maps.event.addDomListener(window, "resize", function() {
        var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
    });
</script>

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

我可能还会将窗口调整大小事件监听器移动到 initMap 函数中，这样您就可以在知道已经创建 map 对象后引用它。