代码之家  ›  专栏  ›  技术社区  ›  Simon

如何让谷歌地图显示整个多边形?

  •  17
  • Simon  · 技术社区  · 14 年前

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

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

    我希望有一个地图API调用沿着…

    myMap.makeSureYouCanSeeAllThisPolygon(aPolygon);
    

    但我找不到。

    如果我必须手动操作,那么很明显我可以很容易地确定中心,但是如何确定缩放比例呢?

    5 回复  |  直到 9 年前
        1
  •  3
  •   James Goodwin    14 年前

    您可以使用 aPolygon.getBounds().getCenter(); 然后使用 GLatLng 返回时 myMap.setCenter() 方法。

    要获得缩放级别,可以使用 myMap.getBoundsZoomLevel(aPolygon.getBounds()); 然后用这个 myMap.setZoom() 方法。

        2
  •  67
  •   Shef    12 年前

    谷歌地图v3 api本机不支持 getBounds() google.maps.polygon类的方法。考虑到google.maps.map类具有 fitBounds() 方法,这正是您要查找的。如果您使用任何频率的谷歌地图API,那么这应该在您的技巧袋中:

    GeEngEnter() 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返回。你可以在这里准备好我的行李- 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());
    

    又矮又甜。希望有帮助。

    -凯文詹姆斯

        3
  •  2
  •   Doug    9 年前

    我编写了一个函数来添加到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;
    }
    
        4
  •  1
  •   infojdem    12 年前

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

        5
  •  1
  •   user1416526    11 年前

    认为他是:

    map.fitBounds(myPolygon.my_getBounds());
    

    奏效。

    推荐文章