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

Question

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

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

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

myMap.makeSureYouCanSeeAllThisPolygon(aPolygon);

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

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

Answer 1

API Карт Google 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 .

Двигаемся дальше. Вот структура, вам нужно реализовать прототип выше, где-то перед следующим битом кода.

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

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

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

map.fitBounds(myPolygon.my_getBounds());

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

Answer 5

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