サンプル・プログラムの実行例
サンプル・プログラムのダウンロード
| stationsearch.html | サンプル・プログラム本体。 |
| pahooGeoCode.js | 住所・緯度・経度に関わるクラス pahooGeoCode。 |
サンプル・プログラムの流れ
JSONはJavaScriptでデータを扱うのに便利な形式だが、セキュリティ上の問題から、異なるドメインの間ではデータの受け渡しができない仕様になっている。これを回避するのが JSONP で、呼び出し時に非同期処理のためのコールバック関数を記述することができる。
逆に言えば、悪意のある第三者がJSONPを呼び出すことができる。ここでは触れないが、サーバサイドでJSONPを用意する場合、機密情報の受け渡しは行わないようにしよう。
解説：クラスファイル
クラスファイル "pahooGeoCode.js" の配置、各種WebAPI用のアプリケーションIDの設定方法については、「準備、クラスについて」を参照してほしい。
「HeartRails Geo API：最寄駅情報取得API」による最寄り駅探索
| URL |
|---|
| https://express.heartrails.com/api/json |
| フィールド名 | 要否 | 内 容 |
|---|---|---|
| method | 必須 | メソッド名 getStations:最寄駅情報取得API |
| input_coordinates_mode | 任意 | 入力パラメータに含まれる緯度/経度の測地系を指定 1:日本測地系 2:世界測地系（デフォルト） |
| x | 必須 | 検索地点の経度（小数表記） |
| y | 必須 | 検索地点の緯度（小数表記） |
| jsonp | 任意 | JSON形式のデータを受け取るためのコールバック関数名 |
| フィールド名 | 内 容 | ||
|---|---|---|---|
| response | station[] | name | 最寄駅名 |
| prev | 前の駅名（始発駅の場合は null） | ||
| next | 次の駅名（終着駅の場合は null） | ||
| x | 最寄駅の経度（世界測地系） | ||
| y | 最寄駅の緯度（世界測地系） | ||
| distance | 指定の場所から最寄駅までの距離（精度は 10ｍ） | ||
| postal | 最寄駅の郵便番号 | ||
| prefecture | 最寄駅の存在する都道府県名 | ||
| line | 最寄駅の存在する路線名 | ||
解説：最寄り駅検索API
0177: /**
0178: * 最寄り駅検索APIのURLを取得する
0179: * @param Float latitude 緯度（世界測地系）
0180: * @param Float longitude 経度（世界測地系）
0181: * @return String URL最寄り駅検索APIのURL
0182: */
0183: function getURL_Heartrails(latitude, longitude) {
0184: url = 'https://express.heartrails.com/api/json?method=getStations&y=' + latitude + '&x=' + longitude + '&jsonp=getHeartrails';
0185: return url;
0186: }
0187:
0188: /**
0189: * 最寄り駅検索API：JSONPコールバック関数
0190: * @param Float latitude 緯度（世界測地系）
0191: * @param Float longitude 経度（世界測地系）
0192: * @param Array items[] 情報を格納する配列
0193: * @return Object(hit=>ヒットした施設数, errmsg=エラーメッセージ, url=>APIのURL)
0194: */
0195: function getHeartrails(json) {
0196: PGC.items = [];
0197: var n = 1;
0198: //レスポンス・チェック
0199: if (json.response.station.length > 0) {
0200: json.response.station.forEach(function(val) {
0201: var obj = new Object();
0202: obj.id = String.fromCodePoint('A'.charCodeAt(0) + n - 1);
0203: obj.title = val.name;
0204: obj.line = val.line;
0205: obj.distance = val.distance;
0206: obj.latitude = parseFloat(val.y);
0207: obj.longitude = parseFloat(val.x);
0208: obj.description = `
0209: ${obj.title}（${obj.line}）<br />距離：${obj.distance}
0210: `;
0211: PGC.items.push(obj);
0212: n++;
0213: });
0214: PGC.pp.error = false;
0215: PGC.pp.errmsg = '';
0216: PGC.pp.hits = n;
0217:
0218: //APIエラー
0219: } else {
0220: PGC.pp.error = true;
0221: PGC.pp.errmsg = 'エラー：範囲内に最寄り駅がない．';
0222: PGC.pp.hits = 0;
0223: }
0224:
0225: //Googleマップ描画
0226: var distance = parseInt($('#distance').val());
0227: var zoom = distance2zoom(distance);
0228: PGC.drawGMap(GMAPID, $('#latitude').val(), $('#longitude').val(), $('#type').val(), zoom, PGC.items);
0229:
0230: //一覧表作成
0231: $('#results').html(makeTable(PGC.items));
0232:
0233: //エラーメッセージ
0234: $('#errmsg').html(PGC.pp.errmsg);
0235: }
0236:
0237: /**
0238: * 最寄り駅検索APIを利用して指定座標の近くにある駅を検索し
0239: * Googleマップにマッピングし、一覧表を表示する
0240: *
0241: * @paramなし
0242: * @returnなし
0243: */
0244: function drawMap() {
0245: var url = getURL_Heartrails($('#latitude').val(), $('#longitude').val());
0246: var target = document.createElement('script');
0247: target.charset = 'utf-8';
0248: target.src = url;
0249: target.onerror = function() {
0250: PGC.pp.error = true;
0251: PGC.pp.errmsg = 'エラー：最寄り駅検索APIの呼び出しができない．';
0252: PGC.pp.hits = 0;
0253: //エラーメッセージ
0254: $('#errmsg').html(PGC.pp.errmsg);
0255: };
0256: document.body.appendChild(target);
0257: }
関数 getHeartrails では、WebAPIの応答を JSON.parse を使って解釈し、オブジェクト配列 items に格納してゆく。
Googleマップに描画する際に必要になるので、要素 description には、最寄り駅名、路線名、距離を代入する。
最後に、Googleマップへの描画、一覧表の作成、エラーメッセージの表示を行い、コールバックを完了する。
参考サイト
- HeartRails Geo API：最寄駅情報取得API
- PHPで住所・ランドマークから最寄り駅を求める：ぱふぅ家のホームページ
- JavaScriptでWebAPIを利用して住所から緯度・経度を求める：ぱふぅ家のホームページ
そこで今回は、「PHPで住所・ランドマークから最寄り駅を求める」で紹介したPHPサーバサイド・プラグラムを、JavaScriptを使ってクライアント・サイドに移植してみる。PHP環境が無くてもブラウザさえあれば、Googleマップ上で喫茶店を検索できるようになる。