Google Maps API - 移动地图后获取新的中心坐标

Question

我正在使用 Google Maps API 显示地图，但如果用户移动地图，我现在需要捕获中心协调员。我在移动地图新中心后的新纬度/经度。

查看Maps Events docs，我可以在这里看到一些选项：

 center_changed
 dragend

我可能会移动。我已经尝试了这两种方法，但无法正确使用语法，并且不确定如何检索中心纬度/经度。这是我最近的尝试

google.maps.event.addListener(map, 'dragend', function() {
    var latitude = event.latLng.lat();
    var longitude = event.latLng.lng();
    console.log("current latitude is: "+latitude);
    console.log("current longitude is: "+longitude);
});

但运行时出现错误TypeError: undefined is not an object (evaluating 'event.latLng.lat')。

谁能告诉我在这里使用什么最合适的事件，以及当用户拖动地图更改地图时，我如何获得新的中心坐标。

Answer 1

如果您希望中心值发生变化，请使用'center_changed' 事件：

center_changed

参数：无
当地图中心属性发生变化时会触发此事件。

google.maps.event.addListener(map, "center_changed", function() {
  var center = this.getCenter();
  var latitude = center.lat();
  var longitude = center.lng();
  console.log("current latitude is: " + latitude);
  console.log("current longitude is: " + longitude);
});

proof of concept fiddle

代码 sn-p：

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

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatlng
  });
  google.maps.event.addListener(map, "center_changed", function() {
    var center = this.getCenter();
    var latitude = center.lat();
    var longitude = center.lng();
    console.log("current latitude is: " + latitude);
    console.log("current longitude is: " + longitude);
  });

}

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>