使用 Google 地圖繪制 svg 圓圈

Question

我正在一個網站上工作，該網站想要使用繪制一些圓圈來表示 Google 地圖上的興趣點，但還沒有找到在地圖上繪制合適的 SVG 圓圈元素的方法。

Google 文檔概述了一個圓元素，但這些元素呈現為多邊形而不是圓（看看圓的邊界，你會發現它們有一個奇怪的多邊形適合粗糙的圓形，而不是原始的 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
});

通過如何在 Google Maps API v3 中使用 SVG 標記

Answer 2

非常類似於duhaime發布的答案，我之前使用過這種方法通過使用

google.maps.SymbolPath.CIRCLE

在路徑屬性中（SymbolPath 只是幾個內置形狀的枚舉，CIRCLE 等同於“0”）。

不完全確定基本原理（假設原始大小實際上是 2px 寬），但是您可以像半徑一樣使用“比例”，因此比例為 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
});