讓用戶在谷歌地圖上繪製曲線？

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