【问题标题】:Google Maps JavaScript API - fitbounds together with setCenterGoogle Maps JavaScript API - fitbounds 和 setCenter
【发布时间】:2015-04-14 16:36:01
【问题描述】:

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

我想要做的是基于一组可以正常工作的标记来运行 fitbounds。但我也想根据用户位置(plunk 中的弹跳标记)将地图居中,并仍然将所有标记保留在地图视图中。 如果我尝试在 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);
}

谢谢!

【问题讨论】:

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


    【解决方案1】:

    简单的解决方案:将您的“用户标记”添加到边界,执行 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.

    【讨论】:

    • 感谢@goecodezip!我将尝试两种提供的方式。我认为更复杂的更适合我的情况。我不知道你可以做 .contains(bounds),只是 .contains.(marker)。看起来很有希望!
    • ,您确定可以将边界类传递给 .contains 函数吗?这对我来说是一个例外。查看 API 文档,它说 bounds.contains() 接受 latlng,而不是 bounds 类。 developers.google.com/maps/documentation/javascript/…
    【解决方案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);
    

    【讨论】:

      猜你喜欢
      • 2015-02-10
      • 2012-11-16
      • 2013-03-28
      • 2013-11-05
      • 2011-03-16
      • 2012-07-01
      • 2013-04-11
      • 1970-01-01
      • 2019-12-26
      相关资源
      最近更新 更多