Позволить пользователям рисовать кривые линии на карте Google? - PullRequest
Новая
       40

Позволить пользователям рисовать кривые линии на карте Google?

6 голосов
/ 18 марта 2011

Есть ли у кого-нибудь примеры или источники, позволяющие пользователям рисовать кривые карты из точки a в точку b?

Спасибо, Alex

Ответы [ 2 ]

16 голосов
/ 08 февраля 2013

Вы можете нарисовать кривые Безье следующим образом: 

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);
2 голосов
/ 19 марта 2011

Возможно, вам придется использовать какой-то слой поверх карты Google.Я знаю, что есть облачное приложение, которое позволяет вам скрабблировать на карте Google, но оно использует Flash для встраивания карты Google scribblemaps.com/… Я не думаю, что возможно использовать две точки, чтобы создать кривую, возможно, более двух точек..

Если я правильно понимаю ваше приложение, основываясь на вашем веб-сайте, цель, которую вы хотите достичь, - позволить пользователям «проложить путь»?Если это так, возможно, вы можете создать форму, в которой пользователи могут отправлять координаты Lat Lng «испытаний», которые они «свергли», а затем использовать Polyline, чтобы нарисовать линию кривой, подобную этой отрисовке карты Google.изогнутая линия .

Однако, если пользователи просто хотят узнать, как подняться из точки А в точку Б и т. д., вы можете использовать DirectionService и DirectionRenderer и установите DirectionsTravelMode на google.maps.DirectionsTravelMode.WALKING и визуализируйте направление на карте таким образом, чтобы пользователь знал, как пройти маршрут с нарисованными на карте направлениями + инструкции по фактическому направлению.

...