如何在所有缩放级别中创建具有相同半径的谷歌地图 v3 圆？

Posted 2023-04-14

【中文标题】如何在所有缩放级别中创建具有相同半径的谷歌地图 v3 圆？

【英文标题】：How to create circle in google map v3 with same radius in all zoom level?

【发布时间】：2012-07-22 00:16:38

【问题描述】：

我正在将地图代码从 v2 迁移到 v3。

在 v2 中，我在 GProjection 和 Overlay 的帮助下创建了圆，它在所有缩放级别看起来都相同。

在 v3 中，谷歌提供了 Circle 类，它将在地图中创建圆圈，但它会在不同的缩放级别上发生变化。

我想创建在所有缩放级别都具有相同大小的圆圈。

我想知道谷歌地图 v3 中的任何其他方式，我可以为所有缩放级别创建具有相同大小的圆圈。

提前致谢。

【问题讨论】：

同尺寸是什么意思？无论放大地图，半径都相同？

same size：表示在缩放级别 6 中，半径为 10 的圆大小不同，在缩放级别 7 中，半径 10 的圆大小不同。地图根据投影值绘制圆，因此相同的半径没有效果不同缩放级别。

你的意思是一个相对于地面改变大小但在像素方面保持相同大小的圆？

【参考方案1】：

要在屏幕上创建相同像素大小的圆圈（相对于地理坐标中相同的区域大小），您通常会使用带有圆形自定义图标的标记。但现在您可以更加灵活并使用 v3 中相对较新的符号。

var marker = new google.maps.Marker(
  position: new google.maps.LatLng(-122.5,47.5),
  icon: 
    path: google.maps.SymbolPath.CIRCLE,
    fillOpacity: 0.5,
    fillColor: '#ff0000',
    strokeOpacity: 1.0,
    strokeColor: '#fff000',
    strokeWeight: 3.0, 
    scale: 20 //pixels
  
);

另外：你也可以用这些符号制作很酷的动画：http://googlegeodevelopers.blogspot.com/2012/06/powerful-data-visualization-with.html

【讨论】：

使用这个对zIndex和鼠标事件处理有一些问题：***.com/questions/11845916/…code.google.com/p/gmaps-api-issues/issues/detail?id=3611

不幸的是，符号目前似乎与 Retina 显示器不兼容：***.com/questions/17352770/…

使用比例对我不起作用，我必须使用半径，例如：'radius: MAX_VALUE / Math.pow(2, map.getZoom())'

【参考方案2】：

我使用此代码来管理我的 Google Map V3 上的缩放和缩放圆圈：

google.maps.event.addListener(iMap.map, 'zoom_changed', function () 
    for (var i = 0; i < iMap.circle.length; i++) 
        var p = Math.pow(2, (21 - iMap.map.getZoom()));
        iMap.circle[i].setRadius(p * 1128.497220 * 0.0027);
    

    menu.hide();
);

【讨论】：

不知道你是怎么得出这两个值 1128.497220 和 0.0027 的？

1128.49 是缩放级别为 20 的 Google 地图的比例因子。但不确定 0.0027。我猜这就是他想要的尺寸。