Google Maps JavaScript API - 与setCenter配合使用

时间:2015-02-13 15:26:59

标签: javascript google-maps google-maps-api-3 fitbounds

我一直在寻找解决这个问题的方法,但我似乎无法找到解决这个问题的方法。我得到的最接近的是this thread。但这不起作用。

我要做的是根据一组工作正常的标记来运行fitbounds。但我还想根据用户位置(插件中的弹跳标记)使地图居中,并仍然将所有标记保留在地图视图中。 如果我尝试在fitBounds之后设置中心,则某些标记位于地图视图之外。 是否有一些结合这两个功能的好方法? Here's the plunk illustrating the issue

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

谢谢!

2 个答案:

答案 0 :(得分:4)

简单的解决方案:将“用户标记”添加到边界,执行fitBounds,然后将结果缩放减1,并以该标记为中心。

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

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

working fiddle

更复杂的解决方案:以“用户标记”为中心,检查标记边界是否完全包含在地图的当前边界(map.getBounds().contains(markerBounds))中,如果没有,则减少缩放级别为1。

答案 1 :(得分:0)

上述答案对我没有用。这是做了什么:

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