Google Maps v3 fitBounds () Увеличение слишком близко для одного маркера

Question

Есть ли способ установить максимальный уровень масштабирования для fitBounds()?Моя проблема в том, что, когда на карту подается только одно местоположение, она максимально увеличивает масштаб, что действительно вынимает карту из контекста и делает ее бесполезной.Возможно, я ошибаюсь?

Заранее спасибо!

Answer 1

Мне нравится решение mrt (особенно, когда вы не знаете, сколько точек вы будете отображать или корректировать), за исключением того, что он сбрасывает маркер, чтобы он больше не находился в центре карты.Я просто расширил его на дополнительную точку, вычтя 0,01 из широты и lng, так что маркер остается в центре.Прекрасно работает, спасибо MRT!

// Pan & Zoom map to show all markers
function fitToMarkers(markers) {

    var bounds = new google.maps.LatLngBounds();

    // Create bounds from markers
    for( var index in markers ) {
        var latlng = markers[index].getPosition();
        bounds.extend(latlng);
    }

    // Don't zoom in too far on only one marker
    if (bounds.getNorthEast().equals(bounds.getSouthWest())) {
       var extendPoint1 = new google.maps.LatLng(bounds.getNorthEast().lat() + 0.01, bounds.getNorthEast().lng() + 0.01);
       var extendPoint2 = new google.maps.LatLng(bounds.getNorthEast().lat() - 0.01, bounds.getNorthEast().lng() - 0.01);
       bounds.extend(extendPoint1);
       bounds.extend(extendPoint2);
    }

    map.fitBounds(bounds);

    // Adjusting zoom here doesn't work :/

}

Answer 2

Вы можете настроить карту с помощью maxZoom в MapOptions ^{(API-ссылка)} , например:

var map = new google.maps.Map(document.getElementById("map"), { maxZoom: 10 });

Это не позволит масштабировать карту глубже при использовании fitBounds() и даже удалит уровни масштабирования из элемента управления масштабированием.

Answer 3

Другое решение - расширить границы, если вы обнаружите, что они слишком малы, прежде чем выполнять fitBounds ():

var bounds = new google.maps.LatLngBounds();
// here you extend your bound as you like
// ...
if (bounds.getNorthEast().equals(bounds.getSouthWest())) {
   var extendPoint = new google.maps.LatLng(bounds.getNorthEast().lat() + 0.01, bounds.getNorthEast().lng() + 0.01);
   bounds.extend(extendPoint);
}
map.fitBounds(bounds);

Answer 4

var map = new google.maps.Map(document.getElementById("map"), { maxZoom: 10 });

Использование параметра MaxZoom лучше всего подходит для того, чтобы не увеличивать масштаб, чтобы приблизиться к имеющимся отметкам.

Answer 5

Как только вы добавите все реальные границы, добавьте эти строки

var offset = 0.002;     
var center = bounds.getCenter();                            
bounds.extend(new google.maps.LatLng(center.lat() + offset, center.lng() + offset));
bounds.extend(new google.maps.LatLng(center.lat() - offset, center.lng() - offset));

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

Это эффективно устанавливает минимальное увеличение, изменяет значение смещения для увеличения или уменьшения масштаба

Answer 6

Если это для одного местоположения, вы можете использовать setCenter () и setZoom ().

Answer 7

вы можете использовать

map.setOptions({
    maxZoom: [what u want],
    minZoom: [what u want]
});

таким образом, вы устанавливаете свойства карты после инициализации карты .... вы можете устанавливать их столько раз, сколько захотите ... но в вашем случаеcase ... вы можете установить их до fitBounds ()

удачи, rarutu

Answer 8

Чтобы предотвратить увеличение масштаба карты, добавьте следующую строку кода:

var zoomOverride = map.getZoom();
        if(zoomOverride > 15) {
        zoomOverride = 15;
        }
      map.setZoom(zoomOverride);

Непосредственно после этой строки:

map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));

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

Если у вас есть какие-либо проблемы или вопросы, просто оставьте мне комментарий к сообщению в блоге, которое я написал об этом на http://icode4you.net/creating-your-own-store-locator-map-how-to-prevent-the-map-from-zooming-in-too-close-on-a-single-marker

Answer 9

Мне очень нравится решение mrt, и оно отлично работает, если у вас всегда есть только один пункт для работы.Однако я обнаружил, что если ограничивающая рамка не основана на одной точке, но точки расположены очень близко друг к другу, это все равно может привести к слишком большому увеличению карты.

Вот способ сначала проверить,точки находятся на определенном расстоянии друг от друга, и если они меньше минимального расстояния, расширьте границы на это минимальное расстояние:

var bounds = new google.maps.LatLngBounds();
// here you extend your bound as you like

// ...

var minDistance = 0.002;
var sumA = bounds.getNorthEast().lng() - bounds.getSouthWest().lng();
var sumB = bounds.getNorthEast().lat() - bounds.getSouthWest().lat();

if((sumA < minDistance && sumA > -minDistance) 
&& (sumB < minDistance && sumB > -minDistance)){
var extendPoint1 = new google.maps.LatLng(bounds.getNorthEast().lat() + minDistance, bounds.getNorthEast().lng() + minDistance);
    var extendPoint2 = new google.maps.LatLng(bounds.getNorthEast().lat() - minDistance, bounds.getNorthEast().lng() - minDistance);
    bounds.extend(extendPoint1);
    bounds.extend(extendPoint2);
}

Надеюсь, это кому-нибудь поможет!

Answer 10

Это дает вам прямой контроль над максимально допустимым увеличением при подгонке границ.

var fitToMarkers = function(map, markers, maxZoom) {
    if (typeof maxZoom == 'undefined') maxZoom = 15;

    google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
        if (this.getZoom() > maxZoom) {
            this.setZoom(maxZoom);
        }
    });

    var bounds = new google.maps.LatLngBounds();
    for (var m = 0; m < markers.length; m++) {
        var marker = markers[m];
        var latlng = marker.getPosition();
        bounds.extend(latlng);
    }

    map.fitBounds(bounds);
};