Question

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

问题是：

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

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

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

Answer 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

如何让fitBounds了解自定义控件

2 个答案: