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

Question

我正在使用谷歌地图API来显示地图，但是如果用户移动地图，我现在需要捕获中心协调员。在移动地图后，我正在追求地图新中心的新经度/经度。

查看地图事件文档，我可以在这里看到一些选项：

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);
});

概念验证小提琴

代码片段：

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>