在谷歌地图中以多边形边界为中心

Question

我试图找到一种更好的方式来居中我的谷歌地图。

我已经编写了代码将标记添加到轮廓中，并将其平方的区域存储在数组中：Coords[i]，其中，保存后返回地图时，它根据“第一个”将地图窗口居中标记”纬度/经度坐标 Coords[0]。

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

我试过在 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().

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>