谷歌地图JavaScript API-与setCenter配合使用

Google Maps JavaScript API - fitbounds together with setCenter

本文关键字：setCenter JavaScript API- 谷歌地图      更新时间：2023-11-12

我一直在寻找这个问题的解决方案，但似乎找不到解决这个问题的方法。我得到的最接近的是这根线。但这行不通。

我想做的是基于一组有效的标记来运行fitbound。但我也想根据用户的位置（plunk中的弹跳标记）将地图居中，并将所有标记保留在地图视图中。如果我尝试在fitBounds之后设置Center，则某些标记在地图视图之外。有没有什么巧妙的方法可以将这两种功能结合起来？这是说明这个问题的双关语。

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);
}

谢谢！

简单解决方案：将您的"用户标记"添加到边界，执行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。

上面的答案对我不起作用

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);
相关文章：