如何在Google Map上基於像素繪制圓和線？

Question

是否可以根據像素尺寸在Google地圖上繪制圓和折線？ 請允許我解釋一下......

我在地圖上有一個標記。 接下來，我想在它周圍畫一個圓圈，標記是確切的中心。 我希望圓圈具有固定的基於像素的半徑。 但是，由於Google Maps API需要以米為單位的距離來確定半徑，因此圓的大小會根據縮放級別而變化，這是我不想要的。

另一個例子是成角度的折線。 我正在從標記畫出這樣一條線到某個方向。 同樣，距離基於米而不是像素，因此縮放縮小或增大線的大小。 另一個不需要的副作用是由於地圖的精確投影（如果我理解正確的話），一條90度角的線不會在東方准確地繪制它。

我正在尋找的是這些繪圖對象在地圖上的便利性，而不是將它們與地圖尺寸聯系起來，只是硬像素。 這樣的事情是否可能，或者它是否意味着我需要從頭開始使用自定義div和某種SVG庫？

Answer 1

它比你想象的要容易，使用符號 。

對於圓圈，有一個預定義的路徑：

new google.maps.Marker({
    position: centerLatLngOfTheCircle,
    icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: yourDesiredRadius,
        strokeWeight: 1,
    },
    map: map
});

對於折線，您必須指定自定義路徑：

line = new google.maps.Marker({
    position: startLatLngOfTheLine,
    icon: {
        path: ['M0 0 ', 
               (Math.cos(Math.PI * angle / 180)), 
               (Math.sin(Math.PI * angle / 180))].join(' '),
        scale: desiredStrokeLength,
        strokeWeight: 1
    },
    map: map
});

（角度順時針計數，從3:00開始）

演示： http ： //jsfiddle.net/doktormolle/y8S8e/