关于javascript：让用户在谷歌地图上画曲线？


Letting users draw curved lines on a google map?

是否有任何示例或资源可以让用户绘制从 a 点到 b 点的曲线图？

谢谢，
亚历克斯

相关讨论

你可以这样画贝塞尔曲线：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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;
    }
};

您可以修改代码，以提供不同的策略来绘制线条。实现的那个用"阴影"指向。

用法很简单：

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

相关讨论

您可能必须在谷歌地图上使用某种图层。我知道有一个云应用程序可以让你在谷歌地图上拼字游戏，但它使用 Flash 嵌入谷歌地图 scribblemaps.com/a€|我认为不可能使用两个点来创建可能超过两个点的曲线。

如果我正确理解了您的应用程序，基于您的网站，您希望实现的目标是让用户"开辟道路"？如果是这种情况，也许您可??以创建一个表单，用户可以在其中提交他们"闪耀"的"试验"的 Lat Lng 坐标，然后使用折线绘制曲线，类似于此谷歌地图绘制曲线。

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