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

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

如果我根据您的网站正确理解您的应用程序，您希望实现的目标是让用户“开辟道路”？如果是这种情况，您可以创建一个表单，用户可以在其中提交“试验”的Lat Lng坐标，然后使用Polyline绘制类似于此google map draw curved line的曲线。

但是，如果用户只想知道如何从a点到b点等等，那么你可以使用DirectionService和DirectionRenderer，并将DirectionsTravelMode设置为{{ 1}}并在地图上以这种方式渲染方向，以便用户知道如何在地图上绘制方向和实际方向指示的路线。

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

2 个答案: