Я хотел бы, чтобы добавить дополнение к виду карты после вызова map.fitBounds(), поэтому все маркеры могут быть видны независимо от элементов управления картой или вещей, таких как скользящие панели, которые будут закрывать маркеры при открытии. У Leaftlet есть возможность добавить дополнение к fitBounds, но Google Maps этого не делает.
Иногда северные маркеры частично скрываются над окном просмотра. Самые западные маркеры также часто лежат под ползунком масштабирования. С API 2 можно было создать виртуальный видовой экран, уменьшив данные прокладки из showBounds() просмотра карты, а затем вызовите метод 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>