Question

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

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

另一个例子是成角度的折线。我正在从标记画出这样一条线到某个方向。同样，距离基于米而不是像素，因此缩放缩小或增大线的大小。另一个不需要的副作用是由于地图的精确投影（如果我理解正确的话），一条90度角的线不会在东方准确地绘制它。

我正在寻找的是这些绘图对象在地图上的便利性，而不是将它们与地图尺寸联系起来，只是硬像素。这样的事情是否可能，或者它是否意味着我需要从头开始使用自定义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
});

（角度顺时针计数，从3:00开始）

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

如何在Google Map上基于像素绘制圆和线？

1 个答案: