javascript-如何在基于像素的Google Map上画圆和线？

是否可以根据像素尺寸在Google地图上绘制圆和折线？请允许我解释一下…

我在地图上有一个标记.接下来,我想在其周围画一个圆,标记为精确的中心.我希望圆具有基于像素的固定半径.但是,由于Google Maps API需要以米为单位的距离作为半径的基础,因此圆的大小会根据缩放级别而变化,这是我不希望的.

另一个示例是成角度的折线.我正在从标记到特定方向画一条线.同样,距离基于米,而不是像素,因此缩放会缩小或增大线的大小.另一个不希望看到的副作用是,由于地图的点状投影(如果我正确理解的话),一条成90度角的线将不会精确地向东绘制.

我要寻找的是这些绘图对象在地图上的便利性,而不是将它们绑定到地图尺寸上,而仅是硬像素.这是可能的,还是意味着我需要从头开始使用自定义div和某种SVG库？

解决方法:

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

(角度从3:00开始顺时针计数)

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

标签：polyline,google-maps,javascript
来源： https://codeday.me/bug/20191029/1963000.html