ルート案内のポリライン取得

広告

GDirectionsクラスのgetPolylineメソッドを使うことで起点から終点までを描いたポリラインを取得することができます。 

getPolyline() 

ルート応答全体に関連付けられた GPolyline オブジェクトを返します。応答内
のすべての経路を示すポリラインが 1 つあることに注意してください。このオ
ブジェクトは、ルート結果がロードされた (つまり、「load」イベントがトリ
ガされた) 後にのみ定義されます。 

戻り値：
  GPolyline

getPolylineメソッドはGPolylineクラスのオブジェクトを返します。ルート案内で描かれるポリラインは中継点があったとしても1つです。

例えば次のように記述します。 

var directions = new GDirections(map, document.getElementById("route"));

var polyline = directions.getPolyline();

サンプルプログラム

では簡単なサンプルで試してみます。

code12_1.js 

var map;
var directions;

function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(35.16809,136.911621), 13);

    directions = new GDirections(map, document.getElementById("route"));
    GEvent.addListener(directions, "addoverlay", onGDirectionsAddOverlay);
  }
}

function dispRoute() {
  var from = document.getElementById("from").value;
  var step = document.getElementById("step").value;
  var to = document.getElementById("to").value;

  directions.clear();

  var pointArray = [from,step,to];
  directions.loadFromWaypoints(pointArray, {locale: "ja_JP"});
}

function onGDirectionsAddOverlay(){ 
  var polyline = directions.getPolyline();
  polyline.setStrokeStyle({color: "#ff0000", weight: 15});
}

map12_1.html 

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>サンプル：ルート案内のポリライン取得</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=(key)&sensor=false"
            type="text/javascript" charset="utf-8"></script>
    <script src="./js/code12_1.js" type="text/javascript"></script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <form>
    <input type="text" size="20" id="from" value="名古屋駅" />
    --><input type="text" size="20" id="step" value="岐阜県岐阜市" />
    --><input type="text" size="20" id="to" value="岐阜県大垣市" />
    <input type="button" id="btn1" value="ルート案内" onclick="dispRoute()" />
    </form>

    <div id="map_canvas" style="width: 500px; height: 300px"></div>
    <div id="route" style="width: 500px; height: 200px;overflow: scroll"></div>
  </body>
</html>

ではブラウザで上記のURLを見てみます。

p12-1

「ルート案内」ボタンを押して下さい。ポリラインの色と太さを変更して表示しています。

p12-2

( Written by Tatsuo Ikura )