Letting users draw curved lines on a google map?

问题:

Does anyone have any examples or source for letting users draw curved maps from point a to point b?

Thanks, Alex

回答1:

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 scrabble 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 to "blaze a trail"? If that is the case maybe you can create a form where the users can submit Lat Lng coordinates of the "trials" that they've "blazed," and then use Polyline to draw the curve line similar to this google map draw curved line.

However, if users just want to know how to hike from point a to point b and etc, then you can use DirectionService and DirectionRenderer, and set the DirectionsTravelMode to google.maps.DirectionsTravelMode.WALKING and render the direction on the map that way so the user would know how to hike a route with directions drawn on the map + actual direction instructions.

回答2:

You can draw Bezier curves this way:

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

You can modify the code, to provide differents strategies to draw the lines. The one implemented is pointed with "shadow".

The usage is pretty easy:

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