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

how to resize google map container according to the circle's radius?

本文关键字：谷歌地图 调整 何根      更新时间：2023-09-26

我正在使用google maps v3。

与我的网站成功整合。

但是我需要根据圆的半径调整谷歌地图的大小。这意味着我需要显示那个圆圈覆盖的谷歌地图。

现在我的容器的大小是:600px;

，圆的半径为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');

请帮帮我。

可能的工作流:

  1. 检索圆的bounds(此处半径无关，因为圆的实际大小取决于圆心)
  2. 将西南和东北转换为像素(您可以使用http://qfox.nl/notes/116的函数来实现它)
  3. x像素差的一半是宽度，y像素差的一半是高度。将map-div的大小调整为这些值
  4. 触发地图的大小调整事件

  5. 重新居中。不要使用圆心，因为你必须在圆的几何中心(不等于地理中心)绘制地图。中心像素计算:

    x: southwestX + halfOfWidth
y: northeastY + halfOfHeight

    将此点转换为LatLng并设置居中

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

相关文章：