Отступы fitBounds в Google Maps API 3 — убедитесь, что маркеры не перекрываются наложенными элементами управления

I' хотелось бы иметь возможность добавлять отступы к представлению карты после вызоваmap.fitBounds(), чтобы все маркеры могли быть видны независимо от элементов управления картой или таких вещей, как скользящие панели, которые закрывали бы маркеры при открытии. В Leaftlet есть опция для добавления отступов к fitBounds, а в Google Maps — нет.

Иногда самые северные маркеры частично скрываются над окном просмотра.Крайние западные маркеры также часто лежат под ползунком масштабирования. С помощью API 2 можно было сформировать виртуальную область просмотра, уменьшив заданные отступы от области просмотра карты, а затем вызвать метод showBounds()для расчета и выполнения масштабирования и центрирования на основе этой виртуальной области просмотра:

map.showBounds(bounds, {top:30,right:10,left:50});

A рабочий пример этого для API 2 можно найти здесьпо ссылке примера showBounds().

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

ОБНОВЛЕНИЕ

(Codepenна случай, если приведенный ниже код не работает)

function initMap() { var map = new google.maps.Map(document.getElementById('map' ), { draggable: true, streetViewControl: false, zoomControl: false }); var marker1 = новый google.maps.Marker({ position: {lat: 37, lng: -121}, map: map, }); var marker2 = новый google.maps.Marker({ position: {lat: 39.3, lng: -122}, map: map, }); var bounds = новый google.maps.LatLngBounds(); bounds.extend(marker1.position); bounds.extend(marker2.position); map.fitBounds (границы); }
#map { высота: 640 пикселей; ширина: 360 пикселей; } #overlays { position: absolute; высота: 50 пикселей; ширина: 340 пикселей; фон: белый; поле: -80px 10px; выравнивание текста: по центру; высота строки: 50px; } /* Необязательно: заполняет окно образцом страницы. */ html, body { height: 100%; маржа: 0; заполнение: 0; }
  Простые маркеры 
Элементы управления / Заказ пиццы / Расчетное время прибытия / и т. д.

Проблема в следующем:

enter image description here

Я попытался добавить элемент управления, как описано в Пользовательские элементы управления, но карта точно не знает об этом — см. эта скриптаразветвлена ​​из примера пользовательского элемента управления Maps. Один из маркеров все еще закрыт элементом управления.

27
задан Dan Dascalescu 5 November 2016 в 02:27
поделиться