Geolocation APIを使って都道府県のセレクトボックスを現在地に近い順にソートする - jQuery入門

都道府県を選択するセレクトボックス

都道府県を選択するセレクトボックスって良く使いますよね。最近は親切なのかどうか分かりませんが、東京が選択項目の一番上に来てたりして、地方の人には辛い時代です。ちゃんとした県の並びとしては、JIS X0402に準拠するのが良さそうです。都道府県選択するやつが参考になりました。

で本題なのですが、最近のモダンブラウザでは位置情報通知機能(Geolocation API)がサポートされています。ならば現在いる場所から近い順に県を表示してあげれば親切ではないのか？と思いサンプルを作ってみました。jQuery入門というタイトルからは逸脱しているかも知れませんすみません。

実行結果

モダンブラウザ（Firefox 3.5～、Google Chrome 5.0～、Safari 5.0～）あたりで動くようです。位置情報を求めてきます的なメッセージが表示されたら許可してください。

別ページで開く

ソース


<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="utf-8">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<title>現在地に近い順に都道府県をソート</title>

<script>

$(function() {

  var prefs = [

    ['北海道', 43.03, 141.21],

    ['青森県', 40.49, 140.44],

    ['岩手県', 39.42, 141.09],

    ['宮城県', 38.16, 140.52],

    ['秋田県', 39.43, 140.06],

    ['山形県', 38.15, 140.20],

    ['福島県', 37.45, 140.28],

    ['茨城県', 36.22, 140.28],

    ['栃木県', 36.33, 139.53],

    ['群馬県', 36.23, 139.03],

    ['埼玉県', 35.51, 139.38],

    ['千葉県', 35.36, 140.06],

    ['東京都', 35.41, 139.45],

    ['神奈川県', 35.26, 139.38],

    ['新潟県', 37.55, 139.02],

    ['富山県', 36.41, 137.13],

    ['石川県', 36.33, 136.39],

    ['福井県', 36.03, 136.13],

    ['山梨県', 35.39, 138.34],

    ['長野県', 36.39, 138.11],

    ['岐阜県', 35.25, 136.45],

    ['静岡県', 34.58, 138.23],

    ['愛知県', 35.11, 136.54],

    ['三重県', 34.43, 136.30],

    ['滋賀県', 35.00, 135.52],

    ['京都府', 35.00, 135.46],

    ['大阪府', 34.41, 135.29],

    ['兵庫県', 34.41, 135.11],

    ['奈良県', 34.41, 135.48],

    ['和歌山県', 34.14, 135.10],

    ['鳥取県', 35.29, 134.13],

    ['島根県', 35.27, 133.04],

    ['岡山県', 34.39, 133.54],

    ['広島県', 34.23, 132.27],

    ['山口県', 34.11, 131.27],

    ['徳島県', 34.03, 134.32],

    ['香川県', 34.20, 134.02],

    ['愛媛県', 33.50, 132.44],

    ['高知県', 33.33, 133.31],

    ['福岡県', 33.35, 130.23],

    ['佐賀県', 33.16, 130.16],

    ['長崎県', 32.45, 129.52],

    ['熊本県', 32.48, 130.42],

    ['大分県', 33.14, 131.37],

    ['宮崎県', 31.56, 131.25],

    ['鹿児島県', 31.36, 130.33],

    ['沖縄県', 26.13, 127.41]

  ];



  navigator.geolocation.getCurrentPosition(function(pos) {

    var lat = pos.coords.latitude;

    var long = pos.coords.longitude;

    $.each(prefs, function(i, p) {

      p[3] = (lat - p[1]) * (lat - p[1]) + (long - p[2]) * (long - p[2]);

    });

    prefs.sort(function(p1, p2) {

      return p1[3] - p2[3];

    });

    $.each(prefs, function(i, p) {

      $('<option></option>').html(p[0]).appendTo('#pref');

    });

  });

});

</script>

</head>

<body>

<select id="pref"></select>

</body>

</html>

ほとんど県の位置定義部分なので、実際のコードは10行ちょっとのシンプルさです。

プログラムの解説

県の位置定義


var prefs = [

  ['北海道', 43.03, 141.21],

  ['青森県', 40.49, 140.44],

  ・・・・・・

県の位置を配列として定義している部分です。県の中心位置をどこに設定するか悩みましたが、今回は単純に県庁所在地の場所、ということにしました。最初の数字が県庁所在地の緯度、２番目の数字が県庁所在地の経度です。

現在位置を取得


navigator.geolocation.getCurrentPosition(function(pos) {・・・});

Geolocation APIのgetCurrentPositionメソッドを使用して、現在位置を取得しています。取得が完了したら引数で指定したコールバッグが呼び出されます。


var lat = pos.coords.latitude;

var long = pos.coords.longitude;

posはnsIDOMGeoPositionCoordsというオブジェクトになり、そこからlatに緯度、longに経度を代入しています。

現在位置と各県庁所在地との距離を求める


$.each(prefs, function(i, p) {

  p[3] = (lat - p[1]) * (lat - p[1]) + (long - p[2]) * (long - p[2]);

});

pref配列の各要素の最後に、現在位置と各県庁所在地との距離の二乗を格納しています。緯度と経度から距離を正確に計算するには難しい計算式があるのですが、今回は正確に求める必要もないので、単純に平面座標と見なしてピタゴラスの定理を使って計算しています。

現在位置から近い順にソート


prefs.sort(function(p1, p2) {

  return p1[3] - p2[3];

});

現在位置と各県庁所在地との距離の短い順にソートしています。JavaScriptだと、とてもシンプルに書けます。

セレクトボックスにソートされた配列要素を追加


$.each(prefs, function(i, p) {

  $('<option></option>').html(p[0]).appendTo('#pref');

});

今回唯一jQueryっぽい部分です。空のoptionタグを作って、要素のテキストとして県名(p[0])を追加し、セレクトボックスの子要素として追加しています。

前ページ　 jQuery入門 TOP　次ページ

ポンクソフト