Как заставить Google Maps отображать целый многоугольник?

У меня есть набор объектов GPolygon, которые привязаны к объектам в моей модели домена и добавляются в карту на моей странице. Объекты домена отображаются в списке на той же странице, и когда пользователь нажимает на один из них, я хочу показать связанный многоугольник.

Я хочу, чтобы весь полигон показывался, и в идеале я хочу, чтобы карта была центрирована в центре многоугольника.

Я надеялся, что появится API API карт вдоль строк...

myMap.makeSureYouCanSeeAllThisPolygon(aPolygon);

но я не смог его найти.

Если мне нужно сделать это вручную, то я, очевидно, могу легко вычислить центрирование, но как мне понять масштаб?

Ответ 1

Вы можете получить центральную точку многоугольника, используя aPolygon.getBounds().getCenter();, а затем используя GLatLng, возвращенный с помощью метода myMap.setCenter().

Чтобы получить уровень масштабирования, вы можете использовать myMap.getBoundsZoomLevel(aPolygon.getBounds());, затем использовать его с помощью метода myMap.setZoom().

Ответ 2

API Google Maps v3 не поддерживает метод getBounds() для класса google.maps.Polygon. Это кажется странным, учитывая тот факт, что класс google.maps.Map имеет метод fitBounds(), который именно вы ищете. Если вы используете API Карт Google с любой частотой, то это должно быть в вашем мешок трюков::

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 как изменяемый MVCArray из LatLng.. вы можете здесь о 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());

Короткий и сладкий. Надеюсь, что это поможет.

-Кевин Джеймс

Ответ 3

Это решение работало для многоугольников, которые я уже успешно добавил на карту. Добавление метода getBounds() для класса google.maps.Polygon, а затем с помощью map.fitBounds(myPolygon.getBounds());

Ответ 4

думает, что он:

map.fitBounds(myPolygon.my_getBounds());

работает с удовольствием.

Ответ 5

Я написал функцию для добавления к решению Кевина Джеймса. он берет многоугольный массив и получает границы для всех полигонов, которые у вас могут быть на вашей карте. вам просто нужно нажать их на массив, а затем вы можете вызвать мою функцию для автоматического масштабирования карты.

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;
}