Googleマップドラッグ可能な指示の保存

Question

ウェブアプリケーションでマーカーを作成し、それらのマーカーを使用してGoogleのルートを作成することができます。しかし、私はユーザーにも経路を変更することができるようにしたいと私はGoogleマップapi v3でdraggable方向を見つけた。変更されたルートをデータベースに保存して、その情報で正確な経路を再作成する方法はありますか？

Answer 1

私は、次のすべて真実であると仮定するつもりです：

var map = new google.maps.Map(document.getElementById('map_canvas'), { 
     zoom: 8, 
     center: new google.maps.LatLng(/* center of map */), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }), 
    directions = new google.maps.DirectionsService(), 
    displayer = new google.maps.DirectionsRenderer({ 
     draggable: true 
    }); 

displayer.setMap(map); 
directions.route({ 
    origin: new google.maps.LatLng(/* start point */), 
    destination: new google.maps.LatLng(/* end point */), 
    travelMode: google.maps.DirectionsTravelMode.DRIVING 
}, function (result) { 
    displayer.setDirections(result); 
}); 

は基本的に、これは単なるスタート - およびエンドポイントがすでに選択されていると、デフォルトルートがすでに描かれていることを前提としています。 （注：DirectionsRendererはdraggable: trueで初期化されています。）

ユーザーがルートを変更し、アプリケーションがdirections_changedイベントを発生させます。私たちは、そのようにそれを追跡することができます。他に

google.maps.event.addListener(displayer, 'directions_changed', some_method); 

何か変更はルートときもが起こる：新しいwaypointが作成されます。ここでは、すべてのウェイポイントで取得する方法は次のとおりです。

var some_method = function() { 
    var waypoints = displayer.directions.route[0].legs[0].via_waypoint; 
}; 

変数waypointsルートが目的地に向かう途中で作る停止を記述するオブジェクトの配列です。 （より多くの仮定がなされていることを注意：route[0]、legs[0]、等を使用している）

各waypointオブジェクトが（何らかの理由で、それぞれlocation.waとlocation.yaで入手可能）緯度と経度を含む、location性質を有しています。したがって、ユーザーがルートを変更するたびに、現在のウェイポイントのすべてのラットおよびロングを回転（および格納）するようにアプリケーションに指示できます。いったんそれらを持っていれば、それらを保存する方法を決めることができます（AJAXをデータベースに保存するサーバー側のページにlocalStorageなど）

Then！これは、ユーザーが選んだ新しいルートを維持する必要があります

directions.route({ 
    origin: new google.maps.LatLng(/* start point */), 
    destination: new google.maps.LatLng(/* end point */), 
    travelMode: google.maps.DirectionsTravelMode.DRIVING, 
    waypoints: [ 
     { location: new google.maps.LatLng(/* lat/lng go here */) } // repeat this as necessary 
    ] 
}, function (result) { 
    displayer.setDirections(result); 
}); 

：

あなたがこのページを読み込む次回は、ストレージからそれらのウェイポイントをつかむなどのようなルートを初期化することができます。最終的な注記：をhowのように、どのユーザーがどのルートを希望しているかをどのように知っているかなど、この回答の外に残しました。ゴッドスピード。

Answer 2

これはsdleihssirhcの答えと今のところの間で変更されたものかもしれませんが、私は上記の解決策を試しましたが、displayer.directions.route [0] で定義されていませんでした。

属性がroutesに変更されていることがわかりました。

var waypoints = displayer.directions.routes[0].legs[0].via_waypoint; 

うまくいけば、この作業を取得しようとしている人のためにいくつかの時間とフラストレーションを保存します。私のために働き、以下の行を使用しました。