6

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

问题是:

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

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

4

2 回答 2

4

你说的有效:

我尝试获取西南边界点的 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);
于 2012-08-28T04:37:23.823 回答
3

我在右手尺寸上有一个 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
于 2013-08-20T21:32:19.790 回答