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

Question

有没有人有任何例子或来源让用户从点a到点b绘制曲线图？

谢谢， 亚历克斯

Answer 1

，您可能需要使用某种层的谷歌地图上的顶部。我知道有一个云应用可以让你在谷歌地图上拼字游戏，但它使用flash来嵌入谷歌地图scribblemaps.com/...我不认为有可能使用两点来创建一个曲线也许超过两点。

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

但是，如果用户只是想知道如何从点徒步到B点等，那么你可以使用DirectionService和DirectionRenderer，并设置DirectionsTravelMode到google.maps.DirectionsTravelMode.WALKING和渲染的映射方式，使用户在方向会知道如何徒步在地图上绘制的路线+实际的方向指示。

Answer 2

可以绘制贝塞尔曲线是这样的：

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