使用Google Maps绘制SVG圆形

Question

我正在处理一个想要使用一些圆圈来表示Google地图上的兴趣点的网站，但是还没有找到在地图上绘制正确SVG圆形元素的方法。谷歌文档概述了一个圆形元素，但这些呈多边形而不是圆形（看一下圆形的边界，你会发现它们有一个奇怪的多边形适合粗略的圆形形状，而不是原始的svg：圆形元素）。是否有可能绘制真正的SVG圆形，例如r属性用于半径？任何提示都将非常有帮助！

- duhaime

---

我猜他们喜欢表情包 https://meta.stackexchange.com/a/19775/269001。我不太了解google-maps API，所以帮不上太多忙，但请注意他们是用canvas API而不是SVG实现的。 - Kaiido

如果我能在Google的自由手圆圈上添加一个即兴的阴影就好了 :/ - duhaime

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

通过 如何在Google Maps API v3中使用SVG标记

学习。

- duhaime

Answer 2

非常类似于duhaime发布的答案，我以前也用过这种方法来使用路径属性中的google.maps.SymbolPath.CIRCLE（SymbolPath只是一些内置形状的枚举，CIRCLE相当于'0'）获取圆形。

不完全确定其原理（假设原始大小实际上是2px宽），但您可以像半径一样使用“scale”来缩放，因此20的规模将给出40px的直径。如果添加strokeWeight，这将增加笔画宽度的整体直径。我认为整体直径的公式可能是（scale + round（0.5 * stoke））* 2，因为如果您对笔画使用奇数，则最终会成为上面的偶数。

在下面的示例中，即使笔画仅有5个，您也将得到46px的圆直径。

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

- Jarrod McGuire