javascript - 如何在基于像素的谷歌地图上画圆和线？

Question

是否可以根据像素尺寸在 Google map 上绘制圆和多段线？请允许我解释...

我在 map 上有一个标记。接下来，我想围绕它画一个圆圈，以标记为中心。我希望圆有一个固定的基于像素的半径。然而，由于 Google Maps API 以米为单位的距离作为半径的基础，因此圆的大小会根据缩放级别而变化，这是我不想要的。

另一个例子是 Angular 多段线。我正在从标记向某个方向画一条线。同样，距离是基于米而不是像素，因此缩放会缩小或增大线条的大小。另一个不需要的副作用是，由于 map 的特殊投影(如果我理解正确的话)，一条 90 度 Angular 的线不会精确地在东边绘制。

我正在寻找的是 map 上这些绘图对象的便利性，无需将它们绑定(bind)到 map 尺寸，只绑定(bind)到硬像素。这种事情是否可能，或者这是否意味着我需要从头开始使用自定义 div 和某种 SVG 库？

Answer 1

这比您想象的要容易，使用 Symbols .

对于一个圆，有一个预定义的路径:

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

( Angular 按顺时针方向计算，从3:00开始)

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