如何让谷歌地图显示整个多边形？答案

【问题标题】：How do I get Google Maps to show a whole polygon?如何让谷歌地图显示整个多边形？
【发布时间】：2011-01-11 17:36:28
【问题描述】：

我有一组 GPolygon 对象，它们附加到我的域模型中的对象并添加到我页面上的地图中。域对象显示在同一页面的列表中，当用户单击其中一个时，我想显示关联的多边形。

我希望显示整个多边形，理想情况下我希望地图以多边形中心为中心。

我希望会有一个地图 API 调用类似于...

myMap.makeSureYouCanSeeAllThisPolygon(aPolygon);

但我一直找不到。

如果我必须手动执行此操作，那么我显然可以轻松计算出居中，但我如何计算出缩放？

【问题讨论】：

标签： google-maps gpolygon

【解决方案1】：

Google Maps v3 API 本身不支持 google.maps.Polygon 类的 getBounds() 方法。这似乎很奇怪，因为 google.maps.Map 类有一个 fitBounds() 方法，这正是您正在寻找的。如果您以任何频率使用 Google Maps API，那么这应该在您的套路::

getBounds() google.maps.Polygon 类的方法

google.maps.Polygon.prototype.getBounds = function() {
    var bounds = new google.maps.LatLngBounds();
    var paths = this.getPaths();
    var path;        
    for (var i = 0; i < paths.getLength(); i++) {
        path = paths.getAt(i);
        for (var ii = 0; ii < path.getLength(); ii++) {
            bounds.extend(path.getAt(ii));
        }
    }
    return bounds;
}

有了这个方法，在地图上居中和拟合多边形变得非常简单。

注意：如果您不熟悉 getAt() 和 getLength() 没关系，它们是 google.maps.MVCArray 类独有的方法。当您调用多边形的 getPaths() 方法时，它会将您的 LatLng 数组作为 LatLng 的可变 MVCArray 返回。您可以在此处准备 MVCArrays - Google Maps v3 API MVCArray class。

继续前进。这是框架，您必须在下一段代码之前的某个地方实现上面的原型方法。

var map = new google.maps.Map(container, opts); // I'll spare the details on this

var coords = [
    new google.maps.LatLng(25.774252, -80.190262)
    ,new google.maps.LatLng(18.466465, -66.118292)
    ,new google.maps.LatLng(32.321384, -64.75737)
    ,new google.maps.LatLng(25.774252, -80.190262)
];

var myPolygon = new google.maps.Polygon({
    paths: coords
    ,strokeColor: "#A80000"
    ,strokeOpacity: 0.8
    ,strokeWeight: 1
    ,fillColor: "#0b2a32"
    ,fillOpacity: 0.12
});

使用舞台布景，您只需：::

map.fitBounds(myPolygon.getBounds());

短而甜。希望对您有所帮助。

-凯文·詹姆斯

【讨论】：

这对我不起作用。控制台说“p”没有定义。我注意到谷歌随机更改它的变量名，这是怎么回事？
@Derek path = paths.getAt(p); 应该是 path = paths.getAt(i);。
这很好用。我建议您在 getBounds() polyfill 周围添加一个条件，以防 Google 将来选择在本机添加它。类似于：if (!google.maps.Polygon.prototype.getBounds)
这是一个很好的解决方案，谢谢！我也添加了 JohnnyO 的条件
发布了类似的solution 以回答另一个问题。

【解决方案2】：

我编写了一个函数来添加到 Kevin James 解决方案中。它需要一个多边形数组并获取地图上所有多边形的边界。你只需要将它们推送到一个数组上，然后你就可以调用我的函数来自动缩放地图。

function getArrayBounds(polyArray){
    var bounds = new google.maps.LatLngBounds();
    var path, paths; 
    for(var polys = 0; polys < polyArray.length; polys++) {
        paths = polyArray[polys].getPaths();       
        for (var i = 0; i < paths.getLength(); i++) {
            path = paths.getAt(i);
            for (var ii = 0; ii < path.getLength(); ii++) {
                bounds.extend(path.getAt(ii));
            }
        }
    }
    return bounds;
}

【讨论】：

正是我所需要的。但是，所有for 循环和这些东西都可以在一行中完成：polygonsArray.forEach(polygon => polygon.getPaths().forEach(path => path.forEach(latLng => bounds.extend(latLng)))); 您只需要第一行 (let bounds = new google.maps.....)，然后是上面的代码，最后是 return bounds; 行:)跨度>

【解决方案3】：

您可以使用aPolygon.getBounds().getCenter(); 获取多边形的中心点，然后使用myMap.setCenter() 方法返回的GLatLng。

要获得缩放级别，您可以使用myMap.getBoundsZoomLevel(aPolygon.getBounds());，然后将其与myMap.setZoom() 方法一起使用。

【讨论】：

这不再是真的！ Maps v3 放弃了 getBounds() 方法。
检查此链接以扩展多边形以获得边界（Google Map V3），tutorialspots.com/…

【解决方案4】：

思考：

map.fitBounds(myPolygon.my_getBounds());

工作愉快。

【讨论】：

【解决方案5】：

此解决方案适用于我已成功添加到地图的多边形。为 google.maps.Polygon 类添加 getBounds() 方法，然后使用 map.fitBounds(myPolygon.getBounds());

【讨论】：

【解决方案6】：

用 ES6 编写的 getBounds 函数的较短版本

google.maps.Polygon.prototype.getBounds = function () {
    let bounds = new google.maps.LatLngBounds();
    this.getPaths().forEach(p => {
        p.forEach(element => bounds.extend(element));
    });
    return bounds;
}

使地图居中

map.fitBounds(poly.getBounds());

【讨论】：