让用户在谷歌地图上绘制曲线？

Question

有人有让用户从点A到点B绘制曲线地图的例子或资源吗？

谢谢， Alex

- Genadinik

---

我也在Google地图帮助论坛上提出了这个问题。这是那个帖子的链接：http://code.google.com/apis/maps/documentation/javascript/forum.html - Genadinik

可能相关的问题 Google Maps API：贝塞尔曲线折线包装 - geocodezip

Answer 1

你可以使用以下方法绘制贝塞尔曲线：

var GmapsCubicBezier = function(lat1, long1, lat2, long2, lat3, long3, lat4, long4, resolution, map){

    var points = [];

    for(it = 0; it <= 1; it += resolution) {
        points.push(this.getBezier({x:lat1, y:long1},{x:lat2, y:long2},{x:lat3, y:long3},{x:lat4, y:long4}, it));
    }

    for(var i = 0; i < points.length - 1; i++) {
            var Line = new google.maps.Polyline({
                path: [new google.maps.LatLng(points[i].x, points[i].y), new google.maps.LatLng(points[i+1].x, points[i+1].y)],
                geodesic: true,
                strokeOpacity: 0,
                strokeColor: 'yellow',
                icons: [{
                        icon: {
                        path: 'M 0,-2 0,2',
                        strokeColor: 'violet',
                        strokeOpacity: 1,
                        strokeWeight: 4
                    },
                    repeat: '36px'
                },{
                        icon: {
                        path: 'M -1,-2 -1,2',
                        strokeColor: 'black',
                        strokeOpacity: 1,
                        strokeWeight: 2
                    },
                    repeat: '36px'
                }]
            }); 

            Line.setMap(map);   
    }
};


GmapsCubicBezier.prototype = {

    B1 : function (t) { return t*t*t; },
    B2 : function (t) { return 3*t*t*(1-t); },
    B3 : function (t) { return 3*t*(1-t)*(1-t); },
    B4 : function (t) { return (1-t)*(1-t)*(1-t); },
    getBezier : function (C1,C2,C3,C4, percent) {
        var pos = {};
        pos.x = C1.x*this.B1(percent) + C2.x*this.B2(percent) + C3.x*this.B3(percent) + C4.x*this.B4(percent);
        pos.y = C1.y*this.B1(percent) + C2.y*this.B2(percent) + C3.y*this.B3(percent) + C4.y*this.B4(percent);
        return pos;
    }
};

你可以修改代码，提供不同的策略来绘制线条。目前实现的是“shadow”策略。

使用方法非常简单：

 var curvedLine = new GmapsCubicBezier(initLat, initLong, control1Lat, control1Long, control2Lat, control2Long, endLat, endLong, 0.1, map);

- nicoabie

---

我修改了你的算法，删除了图标并将描边不透明度设置为1，以便您可以看到原始曲线，但是我发现当我使用不同控制点绘制线条时，起始点不准确。例如，当我使用以下内容时，会得到以下结果http://imgur.com/9lo6W5r： new GmapsCubicBezier(latStart, longStart, latStart-delta, longStart+delta, latEnd-delta, longEnd+delta, latEnd, longEnd, 0.05, map); new GmapsCubicBezier(latStart, longStart, latStart-delta2, longStart+delta2, latEnd-delta2, longEnd+delta2, latEnd, longEnd, 0.05, map); - ianpetzer

@ianpetzer 是的，这可能会发生，因为贝塞尔曲线倾向于靠近控制点而不是精确地穿过它们。如果第一个点和最后一个点不是您提供的点，则可以添加两条直线以避免间隙。这应该不难，如果您有困难，请问我。 - nicoabie

@nicoabie 感谢您提供的好答案，但是您有没有关于如何获取贝塞尔控制点（lat2long2和lat3long3）的想法？ - Otani Shuzo

@OtaniShuzo 我不确定我是否理解了，在这个例子中有4个控制点，贝塞尔曲线将尽可能接近它们。 - nicoabie

@nicoabie感谢您的回复！我不知道如何从两个地理点（纬度，经度）中制作这些控制点。如果您知道如何做或与我分享任何相关链接，我将不胜感激！ - Otani Shuzo

Answer 2

"You might have to use some sort of layer on top of Google Map. I know there's a cloud app that allows you to scribble on a Google Map, but it uses Flash to embed the Google Map (scribblemaps.com/...). I don't think it's possible to use two points to create a curve, perhaps more than two points.

If I understand your application correctly, based on your website, the goal that you wish to achieve is to let users "blaze a trail"? If that is the case, maybe you can create a form where users can submit Lat Lng coordinates of the "trails" they've "blazed," and then use Polyline to draw the curve line similar to this google map draw curved line."

然而，如果用户只想知道如何从A点到B点等等，那么您可以使用DirectionService和DirectionRenderer，并将DirectionsTravelMode设置为google.maps.DirectionsTravelMode.WALKING，以此方式在地图上呈现方向，这样用户就可以了解如何沿着路线徒步旅行，并在地图上绘制实际的方向指示。

- KJYe.Name