javascript - 将 Google map 中的多边形边界居中

Question

我正在尝试找到一种更好的方法来使我的谷歌地图居中。

我已经编写了代码，将标记添加到轮廓和区域中，其正方存储在数组中:Coords[i]，其中保存后返回 map 时，它将基于 map 窗口居中“第一个标记”纬度/经度坐标 Coords[0]。

我正在尝试找出一种更好的方法来将 map 居中，其中轮廓区域周围有足够的空间。

我尝试在 Dragend 上执行此操作，效果有些许:

google.maps.event.addListener(this.map, 'dragend', function(mapEvent) {
var lat = mapEvent.getCenter() .lat(),
lng = mapEvent.getCenter() .lng(),

console.log(lat + " " + lng + " " + this);

});

但它不断抛出错误:“无法获取未定义或空引用的属性“getCenter””

有人可以告诉我我做错了什么，或者告诉我这是实现我想要做的事情的更好方法吗？

作为，另一种选择

如果可能的话，如果我可以将第一个标记 [0] 保留为居中标记，那就太好了，但不允许它勾勒出轮廓...只是标记 1 + 等等......但我不知道如何修改我的代码来做到这一点。

只是寻找有效的解决方案。

我的完整代码在这里: http://pastiebin.com/embed/593d6d809e2f0

Answer 1

您可以使用LatLngBounds对象。如果您有多个多边形，请循环遍历您的多边形，并使用每个路径坐标扩展您的边界对象。

LatLngBounds

然后，您可以使用 map.fitBounds() 让 map 适合边界对象，以便其相应地缩放和居中。

fitBounds

如果您使用多路径多边形，请确保使用 getPaths 方法而不是 getPath ，如下面的代码所示。

function initialize() {

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

    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    var polygon = new google.maps.Polygon({
        editable: true,
        strokeOpacity: 0,
        strokeWeight: 0,
        fillColor: '#00FF00',
        fillOpacity: .6,
        paths: [
        new google.maps.LatLng(39, 4),
        new google.maps.LatLng(34, 24),
        new google.maps.LatLng(43, 24),
        new google.maps.LatLng(39, 4)],
        map: map
    });
    
    // Create the bounds object
    var bounds = new google.maps.LatLngBounds();

    // Get paths from polygon and set event listeners for each path separately
    polygon.getPath().forEach(function (path, index) {
    
        bounds.extend(path);
    });
    
    // Fit Polygon path bounds
    map.fitBounds(bounds);
}

initialize();

#map-canvas {
  height: 200px;
}

<div id="map-canvas"></div>

<script src="https://maps.googleapis.com/maps/api/js"></script>