javascript - map.getBounds() 奇怪的行为(未捕获的类型错误 : Cannot read property 'getNorthEast' of undefined)

Question

我刚刚开始使用 Google Maps API。这个问题很容易理解，但我不知道如何解决。这是 Google 为您提供的除警报之外的简单代码示例。

function initialize() {
    var mapOptions = {
        center: { lat: 43.680039, lng: -79.417076},
        zoom: 13
    };
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
    google.maps.event.addListener(map, 'dragend', change );
    google.maps.event.addListener(map, 'zoom_changed', change );

    alert(map.getBounds().getNorthEast().lat());
}
google.maps.event.addDomListener(window, 'load', initialize);

map.getBounds().getNorthEast().lat() 在从除加载之外的任何其他事件调用时工作正常。当它是像缩放或拖动这样的 map 事件时，它工作正常，但是当我尝试在此处调用它时，我收到错误“未捕获的类型错误:无法读取未定义的属性‘getNorthEast’”。任何人都知道这里发生了什么或我该如何解决这个问题？

Answer 1

Google Maps Javascript API v3 是基于事件的。在定义边界之前，您需要等待 map 上的第一个 bounds_changed 事件。

var map;
function initialize() {
  var mapOptions = {
    center: {
      lat: 43.680039,
      lng: -79.417076
    },
    zoom: 13
  };
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  // google.maps.event.addListener(map, 'dragend', change);
  // google.maps.event.addListener(map, 'zoom_changed', change);
  google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
    alert(map.getBounds().getNorthEast().lat());
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map {
  height: 100%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>