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

How to create circle in google map v3 with same radius in all zoom level?

本文关键字：缩放 v3 谷歌地图 创建      更新时间：2024-01-25

我正在研究从v2到v3的映射代码迁移。

在v2中，我已经在GProject和Overlay的帮助下创建了一个圆圈，它在所有缩放级别中看起来都是相同的大小。

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

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

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

提前谢谢。

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

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

我使用此代码来管理谷歌地图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();
});

我试过jlivni的答案，但使用svg图标比使用形状慢得多。我的方法是使用多段线，因为无论缩放级别如何，它们都显示相同的宽度。我将它的路径设置为中心的坐标。没有那么多的自定义选项（只有颜色、重量和不透明度），但也许它对你来说已经足够好了。

let circle = new google.maps.Polyline({
    map: gmap,
    path: [{ lat: center.lat, lng: center.lng }, { lat: center.lat, lng: center.lng }],
    strokeColor: '#FF0000',
    strokeWeight: 5,
});
相关文章：