使用谷歌地图绘制 svg 圆圈答案

【问题标题】：Drawing svg circles with Google Maps使用谷歌地图绘制 svg 圆圈
【发布时间】：2017-09-28 21:58:38
【问题描述】：

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

Google 文档概述了 circle element，但它们呈现为多边形而不是圆形（看看圆形的边界，您会发现它们有一个奇怪的多边形，适合粗略的圆形，而不是原始的svg:圆形元素）。

是否可以使用诸如半径的r 属性绘制一个真正的SVG 圆？任何指针都会非常有帮助！

【问题讨论】：

我猜他们喜欢表情包meta.stackexchange.com/a/19775/269001。我不知道 google-maps API，所以我无法提供太多帮助，但请注意，他们使用的是 canvas API，而不是 SVG。
如果我能在 Google 的手绘圆圈中添加一个自发的阴影就好了：/

标签： javascript google-maps svg

【解决方案1】：

和duhaime贴的答案很相似，我之前用过这个方法，通过使用得到一个圈子

google.maps.SymbolPath.CIRCLE

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

不完全确定基本原理（假设原始尺寸实际上是 2 像素宽），但您可以使用像半径一样的“比例”，因此 20 的比例将给出 40 像素的直径。如果您添加 strokeWeight，这将通过笔触宽度添加到总直径。我认为总直径的公式可能是 (scale + round(0.5 * stoke)) * 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
});

【讨论】：

【解决方案2】：

这感觉有点笨拙，但显然可以在 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

【讨论】：