У меня есть карта внутри модального окна, для которой я пытаюсь вызвать fitBounds на основе набора точек. Значение баллов будет варьироваться в зависимости от значений в базе данных, но для упрощения я установил значения ниже.
Когда карта размещается вне модального окна, все работает нормально. Однако, оказавшись внутри модального окна, вызов fitBounds всегда слишком сильно увеличивает масштаб. Кажется, это помогает.
Сайт использует Laravel 5.8.38.
Содержание моей страницы:
<head>
<!-- CSS Includes - Bootstrap 4.4.1 -->
{{ Html::style('css/app.css') }}
</head>
<body>
<div class="content">
<button class="btn btn-primary" data-toggle="modal" data-target="#map_modal">View Map</button>
</div>
<div class="modal" id="map_modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-md modal-dialog-centered" role="document">
<div class="modal-content">
<div id="map" style="margin: 15px; height: 300px; width: 300px;"></div>
</div>
</div>
</div>
<!-- JavaScript Includes - jQuery 3.4.1 -->
{{ Html::script('js/app.js') }}
<script type="text/javascript">
var map;
$('#map_modal').on('show.bs.modal', function (e) {
showMap();
});
function showMap() {
// points a and b will vary depending on database values and which elements the user interacts with
var a = new google.maps.Marker({
position: new google.maps.LatLng(41.7760588,-74.2972913),
map: map,
label: "A"
});
var b = new google.maps.Marker({
position: new google.maps.LatLng(41.9350477,-74.024461),
map: map,
label: "A"
});
var bounds = new google.maps.LatLngBounds();
bounds.extend(a.getPosition());
bounds.extend(b.getPosition());
map.fitBounds(bounds);
}
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.798057, lng: -73.973488},
zoom: 8
});
}
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[key]&callback=initMap" async defer></script>
</body>