调用 map.fitBounds 后立即谷歌地图 map.getBounds()答案

【问题标题】：Google Maps map.getBounds() immediately after a call to map.fitBounds调用 map.fitBounds 后立即谷歌地图 map.getBounds()
【发布时间】：2011-03-31 04:19:46
【问题描述】：

我在调用 fitBounds() 之后直接调用 getBounds()，并且我认为当地图居中并缩放以适应边界时，我会得到一个有效的边界。不幸的是，getBounds() 返回 nil。

重现此的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 
    <head> 
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

        <style>
            #map {
                width: 800px;
                height: 400px;
            }
        </style>

    </head>
    <body>
        <div id='map'></div>

        <script>
            var myLatlng1 = new google.maps.LatLng(-38.397, 150.644);
            var myLatlng2 = new google.maps.LatLng(-34.897, 150.844);
            var myLatLngBounds = new google.maps.LatLngBounds(myLatlng1, myLatlng2);

            var myOptions = {
                  mapTypeId: google.maps.MapTypeId.ROADMAP,
                  center: new google.maps.LatLng(0, 0),
                  zoom: 0
            }

            var map = new google.maps.Map(document.getElementById("map"), myOptions);

            map.fitBounds(myLatLngBounds);

            console.log(map.getMapTypeId());
            console.log(map.getZoom());
            console.log(map.getBounds());
        </script>
    </body>
</html>

我有什么遗漏吗？我无法在文档中找到有关这种情况的任何内容。我得到的最接近的是 getBounds 上的一条注释，上面写着：

如果地图尚未初始化（即 mapType 仍为 null），或者尚未设置中心和缩放，则结果为 null。

请注意，getZoom 也返回 undefined。 fitBounds() 没有设置这个值吗？

编辑根据 Marcelo 的建议，我已使用默认缩放和中心更新了代码。

【问题讨论】：

标签： javascript google-maps google-maps-api-3 fitbounds

【解决方案1】：

作为@CrazyEnigma suggested，可以在bounds_changed事件触发后获取边界：

map.fitBounds(myLatLngBounds);

google.maps.event.addListener(map, 'bounds_changed', function() {
  console.log(map.getMapTypeId());
  console.log(map.getZoom());
  console.log(map.getBounds());
});

以上内容将在您的控制台上打印以下内容：

roadmap
6
Object

请注意，如果您只想getBounds 并做某事一次，则应将addListener 替换为addListenerOnce（谢谢@Tomas）。

【讨论】：

你应该改用addListenerOnce！

【解决方案2】：

您必须在 bounds_changed 事件之后获取边界。

【讨论】：

【解决方案3】：

加载瓦片时使用 addListenerOnce

google.maps.event.addListenerOnce(map, 'tilesloaded', function(){ 
map.setCenter(myLatLngBounds)
});

【讨论】：

【解决方案4】：

答案在您自己的报价中。您必须为要初始化的地图设置中心和缩放。

请注意，在 MapOptions 对象规范的文档中，center 和 zoom 的值被标记为必需：

http://code.google.com/apis/maps/documentation/javascript/reference.html#MapOptions

【讨论】：

这并不能解决问题 - 我已根据您的建议更新了代码。
在您发布的代码中，您在 mapTypeId:google.maps.MapTypeId.ROADMAP 后缺少一个逗号必须使用中心和缩放来初始化地图。
是的 - 当我更新问题中的代码时，这是一个错字。如果您实际运行正确的代码，则行为不会改变。