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

Question

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

谢谢,亚历克斯

Answer 1

您可以这样绘制Bezier曲线:

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/\xe2\x80\xa6 我不认为它可以使用两个点创建的曲线可能不止两个点。

\n\n

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

\n\n

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

\n