Google Maps JavaScript API - подходит вместе с setCenter

Question

Я искал решение этой проблемы, но я не могу найти то, что решает это. Ближе всего я получаю эту тему. Но это не работает.

То, что я пытаюсь сделать, - это запускать fitbounds на основе набора маркеров, который работает нормально. Но я также хотел бы центрировать карту в зависимости от местоположения пользователя (подпрыгивающий маркер в планке) и по-прежнему сохранять все маркеры в представлении карты. Если я пытаюсь установить Center после fitBounds, некоторые маркеры находятся за пределами вида карты. Есть ли какой-нибудь изящный способ объединить эти две функции? Вот план, иллюстрирующий проблему.

function initialize() {
  var userCenter = new google.maps.LatLng(51.508742, -0.120850);

  var userCenterMarker = new google.maps.Marker({
  position: userCenter
});

 userCenterMarker.setAnimation(google.maps.Animation.BOUNCE);

var mapProp = {
  center: userCenter,
  zoom: 12,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),   mapProp);

var bounds = new google.maps.LatLngBounds();
var markers = getMarkers();

$(markers).each(function() {
  bounds.extend(this.position);
  this.setMap(map);
});

userCenterMarker.setMap(map);

map.fitBounds(bounds);

setTimeout(function() {
  map.setCenter(userCenter);
}, 1500);
}

Спасибо!

Answer 1

Простое решение: добавьте свой "маркер пользователя" к границам, сделайте fitBounds, затем уменьшите полученный масштаб на 1 и отцентрируйте его на маркере.

  bounds.extend(userCenterMarker.getPosition());
  map.fitBounds(bounds);

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

рабочая скрипка

Более сложное решение: отцентрируйте "маркер пользователя", проверьте, полностью ли включены границы маркера в текущие границы карты (map.getBounds().contains(markerBounds)), если нет, уменьшите масштаб на 1.

Answer 2

Приведенный выше ответ не работает для меня. Вот что сделал:

contained = true;
map.fitBounds(bounds);
map.setCenter(center);
newbounds = map.getBounds();
for (i = 0; i < l; i ++) {
  if (!newbounds.contains(markers[i].getPosition())) {
    contained = false;
  }
}
if (!contained) map.setZoom(map.getZoom() - 1);

Answer 3

Если у вас есть границы и центр, вы можете сделать это, проверив, что текущая граница карты содержит центр и углы границ маркеров, и увеличив масштаб, если нет:

      function fitBoundsAroundCenter( center, bounds, map ) {
    map.fitBounds( bounds );
    map.setCenter( center );
    let zoomPoints = []
    zoomPoints.push( center );
    zoomPoints.push( bounds.getNorthEast() );
    zoomPoints.push( bounds.getSouthWest() );
    
    let allInView = false;
    while ( false === allInView ) {
        map.setZoom( map.getZoom() - 1 );
        allInView = zoomPoints.every( point => {
            if ( map.getBounds().contains( point ) ) {
                return true;
            }
            return false;
        });
    }
}