Permitir a los usuarios dibujar líneas curvas en un mapa de Google?

Question

¿Alguien tiene algún ejemplo o fuente para permitir a los usuarios dibujar mapas curvos desde el punto a hasta el punto b?

Gracias, Alex

Answer 1

puede que tenga que utilizar algún tipo de capa en la parte superior del mapa de google. Sé que hay una aplicación en la nube que te permite buscar en un mapa de Google, pero usa flash para incrustar el mapa de google scribblemaps.com/... no creo que sea posible utilizar dos puntos para crear una curva, tal vez más de dos puntos .

Si entiendo correctamente su solicitud, sobre la base de su sitio web, el objetivo que se desea lograr es permitir a los usuarios a "abrir un camino"? Si ese es el caso, tal vez usted puede crear un formulario donde los usuarios pueden enviar Lat Lng coordenadas de los "ensayos" que han "ardían", y luego usar Polilínea para dibujar la línea curva similar a esta google map draw curved line.

Sin embargo, si los usuarios sólo quieren saber cómo ir de excursión desde el punto A al punto B y etc, entonces se puede utilizar DirectionService y DirectionRenderer, y establecer el DirectionsTravelMode a google.maps.DirectionsTravelMode.WALKING y hacer que la dirección en el mapa de esa manera para que el usuario sabría cómo caminar una ruta con las direcciones dibujadas en el mapa + instrucciones de dirección reales.

Answer 2

se puede dibujar las curvas de Bézier de esta manera:

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

puede modificar el código, para proporcionar estrategias diferentes para dibujar las líneas. El implementado apunta con "sombra".

El uso es bastante fácil:

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