如何让 fitBounds 知道自定义控件答案

【问题标题】：How to make fitBounds aware of custom controls如何让 fitBounds 知道自定义控件
【发布时间】：2012-08-28 04:02:37
【问题描述】：

我的谷歌地图左侧有一个大型 (300*500px) 自定义控件。我将我的标记聚集在一起。当用户点击标记时，我想放大地图以显示该集群中的标记。

问题是：

当我得到我的标记集合的边界时，然后是map.fitBounds(collection_bounds)，我最终在我的大控件下得到了标记。有没有办法防止fitBounds 使用整个视口？

我尝试获取西南边界点的 LatLng，将其转换为像素，将 300 像素移入，然后将 back 转换为 LatLng 以用作新的南方西界点。但这不起作用，因为计算是在缩放之前完成的，所以 300px 移位最终太多了......我想写我自己的fitBounds，但我遇到了同样的问题，因为它是在缩放之前完成的。

【问题讨论】：

在谷歌上找到这个答案......我现在需要的只是“获取我的西南边界点的 LatLng，将其转换为像素，将 300px 移入，然后将其转换回一个纬度"
我遇到了同样的问题，并使用map.panBy(x,y) 移动我的地图解决了它。
看看：jsfiddle.net/upsidown/2wej9smf（不是我的，我是在寻找类似问题的解决方案时才发现的）

标签： google-maps google-maps-api-3

【解决方案1】：

你说的有效：

我已经尝试获取我的西南边界点的 LatLng，将其转换为像素，将 300px 移入，然后将其转换返回到 LatLng 以用作新的西南边界点。

如果您分两步执行，这对用户来说几乎是透明的，因为它执行得如此之快以至于您几乎没有注意到它。所以，首先你做一个普通的map.fitBounds(bounds);，其中边界只由你的标记定义，然后你用你描述的技术重新调整。所以：

  google.maps.event.addListenerOnce(map,'bounds_changed',function(){
    // re-adjust bounds here as you described. 
    // This event fires only once and then the handler removes itself.
  });
  map.fitBounds(bounds);

【讨论】：

谢谢！我没有考虑这样做。似乎这种 hack 是唯一的方法。

【解决方案2】：

我在右手边有一个 400 像素宽的面板。

从调用 zoomWithPoints 开始，传递两个点以包含在视图中，以下代码实现了其他人描述的方法：1) 缩放到边界 2) 使用生成的缩放级别计算要添加到 'maxLon' 上的数量 3 ) 再次缩放到边界。

function zoomToBbox(minLat, minLon, maxLat, maxLon) {
   var southwest = new google.maps.LatLng(minLat, minLon);
   var northeast = new google.maps.LatLng(maxLat, maxLon);
   var bounds = new google.maps.LatLngBounds(southwest, northeast);
   map.fitBounds(bounds);      
}

function zoomWithPoints(lat1, lon1, lat2, lon2) {
   var maxLat = Math.max(lat1, lat2);
   var maxLon = Math.max(lon1, lon2);
   var minLat = Math.min(lat1, lat2);
   var minLon = Math.min(lon1, lon2);

   zoomToBbox(minLat, minLon, maxLat, maxLon);

   var z = map.getZoom(); //get the zoom level after zooming

   // Add a bit to maxLon, to result in it panning left by 400 pixels
   var widthOfPanel = 400;
   var degreesPerTile = 360 / (Math.pow(2,z));
   var degreesPerPx = degreesPerTile / 256;
   var degreesForPanel = degreesPerPx * widthOfPanel;

   maxLon = maxLon + degreesForPanel;

   //zoom (pan across a bit) to take account of the added bit
   zoomToBbox(minLat, minLon, maxLat, maxLon);

   map.setZoom(z); //put it back to right zoom level if necessary
}

...call zoomWithPoints

【讨论】：