- Home ›
- Google Maps API入門 ›
- ルート案内(GDirections) ›
- HERE
高速道路の使用の有無
広告
avoidHighwaysプロパティはルートを探す時に高速道路の使用を除外するかどうかを指定します。
avoidHighways: true avoidHighways: false
「avoidHighways」プロパティにtrueを指定した場合、高速道路を使わないルートを探します。falseを指定した場合は高速道路を使用します。デフォルトはfalseのようです。
実際には次のように記述します。
var directions = new GDirections(map, document.getElementById("route"));
var pointArray = ["東京都港区芝公園4-2-8",
"東京都港区六本木6丁目"];
var option = {locale: "ja_JP", avoidHighways: true};
directions.loadFromWaypoints(pointArray, option);
サンプルプログラム
では簡単なサンプルで試してみます。
var map;
var directions;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(35.681379,139.765577), 13);
directions = new GDirections(map, document.getElementById("route"));
}
}
function dispRoute() {
var from = document.getElementById("from").value;
var to = document.getElementById("to").value;
var flag;
if (document.getElementById("highway").value == "0"){
flag = false;
}else{
flag = true;
}
directions.clear();
var pointArray = [from,to];
var option = {locale: "ja_JP", avoidHighways: flag};
directions.loadFromWaypoints(pointArray, option);
}
<!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/code7_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="to" value="渋谷駅" />
<select id="highway">
<option value="0">高速使う</option>
<option value="1">高速使わない</option>
</select>
<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を見てみます。
「高速道路使う」が選択されている状態でルートを取得すると次のように表示されます。
今度は「高速道路使わない」を選択してからルートを取得すると次のように表示されます。
取得するルートが異なっていることが確認できます。
( Written by Tatsuo Ikura )
AjaxTower