Question

我正在使用谷歌地图v3。

它与我的网站成功整合。

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

现在我的容器尺寸是高度：600px;和宽度：700px;

和圆的半径是10000，即10km。

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

有人可以帮助我吗？

我的谷歌地图代码如下：

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

请帮帮我..

提前致谢。

Answer 1

可能的工作流程：

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

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

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

1 个答案: