Я хочу иметь возможность добавлять отступы к представлению карты после вызова map.fitBounds() , поэтому все маркеры могут быть видны независимо от элементов управления картой или таких вещей, как скользящие панели, закрывающие маркеры при открытии. В Leaftlet есть возможность добавления отступов к fitBounds, а в Google Maps — нет.
Иногда самые северные маркеры частично скрываются над окном просмотра. Крайние западные маркеры также часто лежат под ползунком масштабирования. С API 2 можно было сформировать виртуальную область просмотра, уменьшив заданные отступы от области просмотра карты, а затем вызвать метод showBounds() для расчета и выполнения масштабирования и центрирования на основе этой виртуальной области просмотра:
map.showBounds(bounds, {top:30,right:10,left:50});
Рабочий пример этого для 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 = new google.maps.Marker({
position: {lat: 37, lng: -121},
map: map,
});
var marker2 = new google.maps.Marker({
position: {lat: 39.3, lng: -122},
map: map,
});
var bounds = new google.maps.LatLngBounds();
bounds.extend(marker1.position);
bounds.extend(marker2.position);
map.fitBounds(bounds);
}#map {
height: 640px;
width: 360px;
}
#overlays {
position: absolute;
height: 50px;
width: 340px;
background: white;
margin: -80px 10px;
text-align: center;
line-height: 50px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
</head>
<body>
<div id="map"></div>
<div id="overlays">Controls / Order pizza / ETA / etc.</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?&callback=initMap">
</script>
</body>
</html>Проблема в следующем:
Я попытался добавить элемент управления, как описано в разделе Пользовательские элементы управления, но map точно не знает об этом - см. эту скрипту, разветвленную из Пример пользовательского элемента управления Maps. Один из маркеров все еще закрыт элементом управления.
