在纬度和经度之间绘制 svg 弧答案

【问题标题】：draw an svg arc between lat longs在纬度和经度之间绘制 svg 弧
【发布时间】：2014-08-15 12:08:45
【问题描述】：

下面画一条曲线：

var curvedLine = {
    path: 'M 50,-150 A 100,100 0 0 100 -3,0',
    fillColor: 'transparent',
    fillOpacity: 0.5,
    scale: 1,
    strokeColor: 'gold',
    strokeOpacity: 0.6,
    strokeWeight: 7
};

var marker = new google.maps.Marker({
    position: newLoc,
    icon: curvedLine,
    map: map
});

在curvedLine，在A之后，我可以给出地图上的位置坐标吗？因为当地图缩小时，curvedLine 的大小保持不变。我希望它与地图缩放一起缩放。

【问题讨论】：

你可以找到一个规则来调整比例与缩放级别相比，但这听起来很困难而且有点奇怪。相反，您可以尝试使用折线。
图标不打算在位置之间绘制任何内容。
@MrUpsidown，我想我就是这么做的。但问题只是给出了开始和结束坐标。所以我写了一个函数。检查答案。
@Dr.Molle：我明白这一点。我正在使用折线实现。请查看我发布的答案。

标签： google-maps google-maps-api-3 svg google-maps-markers

【解决方案1】：

我写了一个函数。请检查它。

function drawCurvedLine(startLatLng, endLatLng, offset, right, left, lineColor) {
    var midLoc = getMidPoint(startLatLng, endLatLng);// Get the mid point of the start and end LatLngs
    var midLoc1 = getMidPoint(startLatLng, midLoc);// Get the mid point of the start LatLng and mid LatLng
    var midLoc2 = getMidPoint(midLoc, endLatLng);// Get the mid point of the mid LatLng and end LatLng
    var heading = google.maps.geometry.spherical.computeHeading(startLatLng, endLatLng);// Compute the heading of the start and end LatLngs

    // Change the heading based on right or left value 
    var headingOffset;
    if (right == 1 && left == 0) {
        headingOffset = 90;
    }
    else if (right == 0 && left == 1) {
        headingOffset = -90;
    }

    var offsetLoc = google.maps.geometry.spherical.computeOffset(midLoc, offset / 1.5, heading + headingOffset);// Get the offset location of the mid point of start and end LatLngs
    var offsetLoc1 = google.maps.geometry.spherical.computeOffset(midLoc1, offset / 2, heading + headingOffset);// Get the offset location of the mid point of midLoc and start LatLng    
    var offsetLoc2 = google.maps.geometry.spherical.computeOffset(midLoc2, offset / 2, heading + headingOffset);// Get the offset location of the mid point of midLoc and start LatLng

    // Draw poly line along above computed locations
    var curve = new google.maps.Polyline({
        path: [startLatLng, offsetLoc1, offsetLoc, offsetLoc2, endLatLng],
        geodesic: true,
        strokeColor: lineColor,
        strokeOpacity: 0.6,
        strokeWeight: 7
    });

    curve.setMap(map);

    // Add an arrow to the end of the curved line
    var arrow = new google.maps.Marker({
        position: newLoc,
        map: map,
        icon: {
            path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
            scale: 4,
            strokeColor: lineColor,
            strokeOpacity: 1,
            strokeWeight: 5.0,
            fillColor: 'transparent',
            fillOpacity: 0.6,
            rotation: google.maps.geometry.spherical.computeHeading(offsetLoc2, endLatLng)
        },
    });

}

【讨论】：