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

Question

我正在使用 Google 地图 API 来显示地图，但如果用户移动地图，我现在需要捕获中心坐标。我在地图移动后的新中心lat/long之后。

查看 Maps Events docs 我可以在此处看到一些选项：

 center_changed
 dragend

我可能会搬家。我都试过了，但语法不正确，也不确定如何检索中心 lat/long。这是我最近的尝试

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

Arguments: None
This event is fired when the map center property changes.

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

代码片段：

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>

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

Google Maps API - Get New Center Coordinates after map is moved

google-maps

google-maps-api-3