Google Maps v3: обеспечение соблюдения мин. Уровень увеличения при использовании FITBOUNDS

Question

Я рисую серию маркеров на карте (используя V3 API карт).

В V2 у меня был следующий код:

  bounds = new GLatLngBounds();

  ... loop thru and put markers on map ...
  bounds.extend(point);
  ... end looping

  map.setCenter(bounds.getCenter());
  var level = map.getBoundsZoomLevel(bounds);
  if ( level == 1 ) 
    level = 5;
  map.setZoom(level > 6 ? 6 : level);

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

Я пытаюсь дублировать эту функциональность в V3, но Setzoom и Fitbounds, похоже, не сотрудничают:

... loop thru and put markers on the map
  var ll = new google.maps.LatLng(p.lat,p.lng);
  bounds.extend(ll);
... end loop

var zoom = map.getZoom();
map.setZoom(zoom > 6 ? 6 : zoom);
map.fitBounds(bounds);

Я попробовал разные перестановки (например, перемещение Fitbounds перед Setzoom), но ничто, что я делаю с Setzoom, не влияет на карту. Я что-то упускаю? Есть ли способ сделать это?

Answer 1

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

// Do other stuff to set up map
var map = new google.maps.Map(mapElement, myOptions);
// This is needed to set the zoom after fitbounds, 
google.maps.event.addListener(map, 'zoom_changed', function() {
    zoomChangeBoundsListener = 
        google.maps.event.addListener(map, 'bounds_changed', function(event) {
            if (this.getZoom() > 15 && this.initialZoom == true) {
                // Change max/min zoom here
                this.setZoom(15);
                this.initialZoom = false;
            }
        google.maps.event.removeListener(zoomChangeBoundsListener);
    });
});
map.initialZoom = true;
map.fitBounds(bounds);

Надеюсь, это поможет,

Энтони.

Answer 2

Не пробовал, я бы сказал, что вы сможете сделать это, просто имея fitBounds() Прежде чем получить уровень масштабирования, т.е.

map.fitBounds(bounds);
var zoom = map.getZoom();
map.setZoom(zoom > 6 ? 6 : zoom);

Если вы попробовали это, и это не сработало, вы можете настроить свою карту minZoom в MapOptions ^{(Апи-ссылка)} как это:

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

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

Answer 3

Решение Энтони очень хорошее. Мне нужно было только исправить зум для нагрузки на inital страницы (гарантируя, что вы не были слишком далеко, чтобы начать), и это помогло мне:

var zoomChangeBoundsListener =
    google.maps.event.addListener(map, 'bounds_changed', function(event) {
        google.maps.event.removeListener(zoomChangeBoundsListener);
        map.setZoom( Math.min( 15, map.getZoom() ) );
    });


map.fitBounds( zoomBounds );

Answer 4

Вы также можете установить опцию Maxzoom непосредственно перед вызовом fitbounds () и сбросить значение впоследствии:

if(!bounds.isEmpty()) {
    var originalMaxZoom = map.maxZoom;
    map.setOptions({maxZoom: 18});
    map.fitBounds(bounds);
    map.setOptions({maxZoom: originalMaxZoom});
}

Answer 5

Когда вы вызовите map.fitbounds () на одном элементе - карта может приблизиться слишком внимательно. Чтобы исправить это, просто добавьте «maxzoom» в Mapoptions ...

var mapOptions = {
  maxZoom: 15
};

Answer 6

В моем случае я просто хотел установить уровень масштабирования на один меньше, чем то, что Google Maps выбрала для меня во время Fitbounds. Цель состояла в том, чтобы использовать FITBOUNDS, но также гарантировать, что никакие маркеры не находились под какими -либо инструментами карты и т. Д.

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

Это в начальном блоке, где изначально создан объект карты ...

var mapZoom = null;

Затем это добавляется в каждый блок, где добавляется маркер, прямо перед картой.

google.maps.event.addListenerOnce(map, 'bounds_changed', function() { 
    if (mapZoom != map.getZoom()) { 
        mapZoom = (map.getZoom() - 1); 
        map.setZoom(mapZoom); 
    } 
});

При использовании 'bounds_changed' без проверки на месте карта увеличилась один раз для каждого маркера независимо от того, нуждается в этом или нет. И наоборот, когда я использовал «Zoom_changed», у меня иногда были маркеры под инструментами карты, потому что зум на самом деле не изменился. Теперь это всегда запускается, но проверка гарантирует, что он увеличивается только один раз и только при необходимости.

Надеюсь это поможет.

Answer 7

Поскольку Google Maps v3 основан на события Zoom_changed Триггеры события:

var initial = true
google.maps.event.addListener(map, "zoom_changed", function() {
    if (initial == true){
       if (map.getZoom() > 11) {
         map.setZoom(11);
         initial = false;
       }
    }
}); 

я использовал исходный Чтобы сделать карту не слишком сильно увеличивать, когда возможные Fitbounds проникают, но позволить пользователю масштабировать столько, сколько он/она хочет. Без условия любое событие Zoom более 11 было бы возможно для пользователя.

Answer 8

Я нашел следующее работать довольно хорошо. Это вариант на Райана отвечать к https: //stackoverflow.com/questions/3334729/.... Анкет Он гарантирует показать область, по крайней мере, в два раза больше значения offset в градусах.

const center = bounds.getCenter()
const offset = 0.01
const northEast = new google.maps.LatLng(
    center.lat() + offset,
    center.lng() + offset
)
const southWest = new google.maps.LatLng(
    center.lat() - offset,
    center.lng() - offset
)
const minBounds = new google.maps.LatLngBounds(southWest, northEast)
map.fitBounds(bounds.union(minBounds))