如何在Google地图v3中创建具有相同半径的圆形，使其在所有缩放级别下保持一致？

Question

我正在进行从v2到v3的地图代码迁移。

在v2中，我使用GProjection和Overlay创建圆形，这将在所有缩放级别下看起来相同大小。

在v3中，Google提供了Circle类来创建地图上的圆形，但它会在不同的缩放级别下改变大小。

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

我想知道在Google Maps v3中是否有其他方法可以创建大小不变的圆形。

提前感谢。

- Ashvin

---

你说的“相同大小”是指什么？是指在地图缩放时，半径始终保持不变吗？ - Jorge

同样大小：在缩放级别6中，半径为10的圆的大小与缩放级别7中半径为10的圆的大小不同。地图根据投影值绘制圆形，因此相同的半径在每个缩放级别下都没有影响。 - Ashvin

你的意思是一个圆在地面上会改变大小，但在像素方面保持相同的大小吗？ - Marcelo

Answer 1

要在屏幕上创建相同像素大小的圆（与地理坐标中相同区域大小的圆不同），传统做法是使用自定义图标为圆形的标记。但现在，您可以更加灵活地使用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

- jlivni

---

使用这个功能会有一些zIndex和鼠标事件处理的问题：https://dev59.com/1mgt5IYBdhLWcg3wvgBu https://code.google.com/p/gmaps-api-issues/issues/detail?id=3611 - AlfaTeK

很遗憾，似乎符号目前不兼容Retina显示屏：http://stackoverflow.com/questions/17352770/making-google-maps-symbols-compatible-with-high-resolution-displays - David Jones

使用比例尺对我没有用，我不得不使用半径，类似这样：'radius: MAX_VALUE / Math.pow(2，map.getZoom())' - Arman Bimatov

Answer 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();
});

- Ramin Farajpour

---

我想知道你是如何得出这两个值 1128.497220 和 0.0027 的？ - Arman Ortega

1128.49 是谷歌地图在缩放级别20时的比例尺系数。不确定0.0027是什么意思。我猜那可能是他想要的尺寸。 - Rarw

Answer 3

我尝试了jlivni的答案，但是使用svg图标比使用形状要慢得多。我的方法是使用折线，因为它们在任何缩放级别下都显示相同的宽度。我将其路径设置为中心的坐标。虽然customization选项不如其他方式（只有颜色、重量和不透明度），但也许对你来说足够好用。

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,
});

- nda