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

时间:2010-02-01 13:49:19

标签: google-maps gpolygon

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

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

我希望有一个map API调用......

myMap.makeSureYouCanSeeAllThisPolygon(aPolygon);

但我找不到一个。

如果我必须手动执行此操作,那么我可以很容易地找出对中,但我该如何找出缩放?

5 个答案:

答案 0 :(得分:71)

Google Maps v3 API本身不支持google.maps.Polygon类的getBounds()方法。这看起来很奇怪,因为google.maps.Map类有一个fitBounds()方法,这正是你正在寻找的..如果你使用任何频率的Google Maps API,那么这应该是在你的技巧包::

google.maps.Polygon类的

getBounds()方法

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

继续前进。这是框架,你必须在下一段代码之前的某个地方实现prototyped方法。

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());

短而甜蜜。希望有所帮助。

-Kevin James

答案 1 :(得分:3)

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

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

答案 2 :(得分:3)

我写了一个函数来添加到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;
}

答案 3 :(得分:1)

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

答案 4 :(得分:1)

认为他是这样的:

map.fitBounds(myPolygon.my_getBounds());

是一种享受。