ルート案内のクリア(clearメソッド)

広告

loadメソッドを呼び出すことでルート案内が表示されますが、表示されたルート案内をクリアするにはGDirectionsクラスのclearメソッドを使います。 

clear() 

既存のルート結果をクリアし、地図とパネルからオーバーレイを削除して、保留
中の load() リクエストをキャンセルします。

メソッドを呼び出すと地図上に表示されたポリゴンとテキスト表示されたルート案内をクリアします。

実際には次のように記述します。 

var directions = new GDirections(map, document.getElementById('route'));
directions.load('from: 東京駅 to: 渋谷駅', {locale: 'ja_JP'});

directions.clear();

サンプルプログラム

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

code3_1.js 

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;

  directions.clear();

  str = 'from: ' + from + ' to: ' + to;
  directions.load(str, {locale: 'ja_JP'});
}

function clearRoute() {
  directions.clear();
}

map3_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/code3_1.js" type="text/javascript"></script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <form>
    from：<input type="text" id="from" size="20" value="東京駅" />
    to：<input type="text" id="to" size="20" value="渋谷駅" />
    <input type="button" id="btn1" value="ルート案内" onclick="dispRoute()" />
    <input type="button" id="btn2" value="クリア" onclick="clearRoute()" />
    </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を見てみます。

p3-1

起点を「東京駅」、終点を「渋谷駅」で検索してみると次のように表示されます。

p3-2

「クリア」ボタンを押すとルート案内がクリアされます。

p3-3

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。

カテゴリ
検索