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

Question

有没有人有任何例子或来源让用户绘制从a点到b点的曲线图？

谢谢， 亚历克斯

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

您可以修改代码，提供不同的绘制线条的策略。实施的那个是用“阴影”指出的。

使用方法非常简单：

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

Answer 2

您可能需要在谷歌地图上使用某种图层。我知道有一个云应用程序可以让你在谷歌地图上拼字，但它使用闪存来嵌入谷歌地图 scribblemaps.com/… 我不认为可以使用两个点来创建一条曲线，也许超过两个点。

如果我对你的应用理解正确的话，根据你的网站，你希望达到的目标是让用户“开辟道路”？如果是这种情况，也许您可​​以创建一个表单，用户可以在其中提交他们“闪耀”的“试验”的 Lat Lng 坐标，然后使用 Polyline 绘制类似于此的曲线 谷歌地图绘制曲线。

但是，如果用户只是想知道如何从 a 点徒步到 b 点等，那么您可以使用 DirectionService 和 DirectionRenderer，并将 DirectionsTravelMode 设置为google.maps.DirectionsTravelMode.WALKING 并以这种方式在地图上呈现方向，以便用户知道如何使用地图上绘制的方向 + 实际方向说明来徒步旅行。