适合多个多边形谷歌地图的边界

Question

我正在尝试扩展多个多边形的地图边界，但似乎只是扩展循环中最后一个多边形的边界。对我哪里出错有什么建议吗？

 function FitBounds(){
    for (var i=0; i < shapes2.length; i++){
        var paths = shapes2[i].getPaths();
        var bounds= new google.maps.LatLngBounds();
        paths.forEach(function(path){
           var ar = path.getArray();
           for(var i=0, l = ar.length; i <l; i++){
              bounds.extend(ar[i]);
           }
        })
    }
    map.fitBounds(bounds)
 }

Answer 1

在循环外部创建边界。

function FitBounds(){
    var bounds= new google.maps.LatLngBounds();
    for (var i=0; i < shapes2.length; i++){
        var paths = shapes2[i].getPaths();
        paths.forEach(function(path){
           var ar = path.getArray();
           for(var i=0, l = ar.length; i <l; i++){
              bounds.extend(ar[i]);
           }
        })
    }
    map.fitBounds(bounds)
 }

Answer 2

供其他来到这里的人参考，谷歌地图库提供了辅助方法，可以更轻松地获取形状集合的边界：

function FitBounds(){
    var bounds = shapes2.reduce((boundsAccumulator, shape) => 
      boundsAccumulator.union(shape.getBounds()), new google.maps.LatLngBounds())
    
    map.fitBounds(bounds)
 }

或者如果你不喜欢减少

function FitBounds(){
    var bounds = new google.maps.LatLngBounds()
    
    shapes2.forEach(shape) => bounds.union(shape.getBounds()))
    
    map.fitBounds(bounds)
 }

Answer 3

您可以使用 Polygon 方法 getPaths() 以简化的形式实现相同的目的。

    const bounds = new google.maps.LatLngBounds();
    polygonList.forEach((polygon) => {
      polygon.getPaths().forEach((path) => {
        path.forEach((point) => {
          bounds.extend(point);
        });
      });
    });
    map.fitBounds(bounds);