如何根据圆的半径调整谷歌地图容器的大小？答案

【问题标题】：how to resize google map container according to the circle's radius?如何根据圆的半径调整谷歌地图容器的大小？
【发布时间】：2014-05-16 05:20:19
【问题描述】：

我正在使用谷歌地图 v3。

它已成功与我的网站集成。

但我需要根据圆的半径调整谷歌地图的大小。表示我需要显示该圆圈所覆盖的谷歌地图。

现在我的容器大小是 height :600px;和宽度：700px;

圆的半径是10000，即10公里。

但是如果我增加半径，我需要增加容器的大小。我不知道该怎么做。

谁能帮帮我？

我的谷歌地图代码如下：

 var mapCanvas = document.getElementById('map_canvas');
 var myLatLng = new google.maps.LatLng(-33.838265, 151.206481);

var mapOptions = {
  center: myLatLng,
  zoom: 12,
  maxZoom: 12,
  minZoom: 12,
  disableDefaultUI: true,
   draggable: false,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
  var map = new google.maps.Map($('#map_canvas')[0], mapOptions);

  var cmarker = new google.maps.Marker({
  map: map,
  position: myLatLng
});

    // Add circle overlay and bind to marker
var circle = new google.maps.Circle({
  map: map,
  radius: 10000,    // 10 km in metres
  fillColor: '#AA0000'
});
circle.bindTo('center', cmarker, 'position');

请帮帮我..

提前致谢。

【问题讨论】：

您希望缩放级别为 12 的地图恰好适合以 -33.838265、151.206481 为中心的 10 公里圆？
是的，但我希望 map_canvas div 适合一个圆圈。
你想让 div 成为一个圆圈吗？
不应该是正方形或长方形。这就是我不知道如何根据半径设置高度和宽度？
你试过什么？这当然是可能的，但我没有任何理由这样做。

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

【解决方案1】：

可能的工作流程：

获取圆的bounds（这里半径无关，因为圆的实际大小取决于圆心）
将西南和东北转换为像素（可以使用http://qfox.nl/notes/116处的函数来实现）
x 像素差的一半是宽度，y 像素差的一半是高度。将 map-div 的大小调整为这些值
触发地图调整大小事件
重新居中地图。不要使用圆的center-latLng，因为您必须将地图居中在圆的几何中心（不等于地理中心）。中心像素的计算：
```
x: southwestX + halfOfWidth
y: northeastY + halfOfHeight
```
将此点转换为LatLng并设置中心。

结果：http://jsfiddle.net/doktormolle/Bqr3Y/

【讨论】：