Question

我正在开发一个网站，想要使用绘制一些圆圈来表示Google地图上的兴趣点，但还没有找到在地图上绘制正确的SVG圆形元素的方法。

Google文档概述了一个circle element但这些渲染为多边形而不是圆形（看一看圆的边框，你会发现它们有一个奇怪的多边形适合粗糙的圆形，而不是一个原始的svg：circle元素）。

是否可以使用类似r属性的半径绘制真正的SVG圆圈？任何指针都会非常有用！

Answer 1

这感觉有点笨拙，但在SVG中可以明显地徒手一个圆圈，然后将绘制的元素作为标记传递给地图：

var icon = {
    path: 'M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0',
    fillColor: '#FF0000',
    fillOpacity: .6,
    anchor: new google.maps.Point(0,0),
    strokeWeight: 0,
    scale: 1
}

var marker = new google.maps.Marker({
    position: {lat: 55, lng: 0},
    map: map,
    draggable: false,
    icon: icon
});

通过How to use SVG markers in Google Maps API v3

Answer 2

与duhaime发布的答案非常相似，我之前曾使用此方法通过使用来圈出一个

google.maps.SymbolPath.CIRCLE

在path属性中（SymbolPath只是几个内置形状的枚举，CIRCLE等于“ 0”）。

不能完全确定其原理（假设原始尺寸实际上是2px宽），但是您可以使用“ scale”（例如半径），因此20的比例将给出40px的直径。如果添加strokeWeight，这将通过笔触宽度添加到总直径中。我认为总直径的公式可能是（比例+圆（0.5 *行程））* 2，因为如果对行程使用奇数，则最终将是上面的偶数。

在下面的示例中，您将获得46px的圆直径（即使笔触只有5个）

var icon = {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: "#da291c",
    fillOpacity: 0.5,
    strokeColor: "blue",
    strokeOpacity: 1,
    strokeWeight: 5,
    scale: 20
}

var marker = new google.maps.Marker({
    position: {lat: 57, lng: -2},
    map: map,
    icon: icon
});

使用Google地图绘制svg圈

2 个答案: