Clever Geek Handbook

GoogleマップAPI。 ルートを構築します。 パートII

前回私が知ったように、グーグルは自分で2つのポイント間のルートを構築できます。 これにはGdirectionsクラスがあります。 さて、この機会を実現する方法を見てみましょう。



実際、タスクは最初の例よりもはるかに簡単です。 クラスを初期化し、いくつかのハンドラーをハングさせ、結果を表示するだけで十分です。 誰もが私たちのために考慮し、構築します。





最初は、いつものように、マップを作成し、コントロールを設定します。

map = new GMap2(document.getElementById("map_canvas"));

map.setCenter(new GLatLng(55.758611, 37.616638), 10);

map.setUIToDefault();





出発点を設定します（住所と地理座標の両方を直接指定できます）。

var startpoint = "55.75585, 37.62036";

var endpoint = " ";





そして、ビルド関数を呼び出して、開始点と終了点を渡します：

add_direction(startpoint, endpoint);





その中で、ルートクラスのインスタンスを作成します。

function add_direction(startpoint, endpoint)

{

direct = new Gdirections();

…





エラーを通知するハンドラーを切断します。

GEvent.addListener(direct,"error", function() {

alert("Location(s) not recognised. Code: "+direct.getStatus().code);

});





ルートの構築が成功したときに呼び出されるようにハンドラーを設定します（以下を参照）

GEvent.addListener(direct,"load", function(){…}





そして、ルートを形成します：

direct.loadFromWaypoints([startpoint,endpoint],{getPolyline:true,getSteps:true});

}





これで、ルートが形成され、最終ロード（ロードイベントの処理）後にマップ上に表示するためだけに残ります。

ルートから破線を取得して、マップに追加します。

poly = direct.getPolyline();

map.addOverlay(poly);





2つのマーカーを作成し、それらをルートの最初と最後に配置し、マーカーをドラッグ可能にし、ドラッグの最後にchange_position関数を呼び出します（その中で、開始と終了の新しい座標に従ってルートを再構築します）。

ms = new GMarker(poly.getVertex(0),{'draggable': true, 'icon': G_START_ICON});

me = new GMarker(poly.getVertex(poly.getVertexCount()-1),{'draggable': true, 'icon': G_END_ICON});

GEvent.addListener(ms, "dragend", change_position);

GEvent.addListener(me, "dragend", change_position);

map.addOverlay(ms);

map.addOverlay(me);





Googleはルートを作成するだけでなく、移動の方向にテキストコメントを提供し、それらを受け取って出力します（同時にルートの長さも）。

var descr = "";

for(i=0;i<direct.getRoute(0).getNumSteps();i++)

descr = descr + '<br>' + (i+1)+'. ' + direct.getRoute(0).getStep(i).getDescriptionHtml();

descr += ' : ' + direct.getDistance().html;

document.getElementById('route_descr').innerHTML = descr;





それだけです。例はhttp://gdirections.webservis.ru/で見ることができます

すべてが非常に単純ですが、1つの非常に不快な瞬間があります。 わが国では、Googleはモスクワ地域のみにルートを提供しています。 この領域はマップ上にはっきりと表示されており、白い斑点のない緑色です（近似境界線、トヴェリ-ウラジミール-リャザン-カルーガ）。 拡張を待つことは残っています。


More articles:


All Articles