ポンクソフト

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

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

目次

  1. jQuery入門
  2. jQueryのインストール・簡単な使い方
  3. クイズゲームの作り方
  4. 秘密の暗号を作ってみよう(たぬき暗号)
  5. アクションゲームを作ってみよう(ぬりかべ)
  6. 画像を使ったジグソーパズルを作ってみよう
  7. もぐらたたきっぽいゲーム
  8. ドラッグ可能なポップアップウインドウを作ろう
  9. jQuery UI Sortableで1ラインオセロゲーム
  10. ブラウザ全体をブロックしてみる
  11. Geolocation APIを使って都道府県のセレクトボックスを現在地に近い順にソートする
  12. 発生したイベントの状態を保持・保存する6つのパターン
  13. Ajaxを利用したシンプルなイメージギャラリーを作ってみる
  14. テーブルにページ送り(ページング)を実装してみる
  15. jQuery UI Draggableを使って付箋(sticky)を作ってみる
  16. カラムでソートできるテーブルを自作してみる
  17. テーブルを使ったシンプルなドット絵エディタを作ってみる
  18. iPhoneのようにマウスではじいてスクロール(フリックスクロール)を実装してみる
  19. テキストフィールドの数値をマウスの上下移動で増減する
  20. iPhoneのように大きい画像の表示領域をマウスのドラッグで移動してみる
  21. iPhoneのように画像をダブルクリックした地点を中心に拡大縮小する
  22. リアルタイムプレビュー付きのHTMLエディタを作ろう
  23. 保存できる付箋を作ってみる(Cookie、localStorage)

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

都道府県を選択するセレクトボックスって良く使いますよね。最近は親切なのかどうか分かりませんが、東京が選択項目の一番上に来てたりして、地方の人には辛い時代です。ちゃんとした県の並びとしては、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],
  ・・・・・・
県の位置を配列として定義している部分です。県の中心位置をどこに設定するか悩みましたが、今回は単純に県庁所在地の場所、ということにしました。最初の数字が県庁所在地の緯度、2番目の数字が県庁所在地の経度です。

現在位置を取得

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 次ページ
このエントリーをはてなブックマークに追加 そっか0

このページに関するコメントをどうぞ

お名前:


ひらがな
カタナナ
2017/08/05 16:41

check_boxes
ソースを使ってもいいですか?
2017/07/12 16:01

k
jQueryで作成した付箋を複数人で同時に編集し共有するシステムを実装するとなると、どのような技術を用いるべきでしょうか?
2017/06/20 23:19

ataru
もぐらたたきに絵を入れるとしたら、どこを変えたらいいのですか?
2016/09/06 14:20

教えてください
クイズゲームの作り方で、2問目、3問目を作っても絶対に
2番が正解になりますよね?

input要素を読み込んでいるので、全て同じ動作になると思うんですが、他の番号を正解にしたい場合どうしたら良いでしょうか?

また、inputにid行ってみましたが、うまく反応しませんでした。
2016/03/07 14:13

まほ
わかりやすく説明していただきありがとうございます!
ところで、
$.each(items, function(i, item) {
make().css(item.css).html(item.html);
});
の部分だけ今ひとつ理解ができなかったのですが
localStorage.stickyに値が入っているときに
①itemsという配列に JSON形式の文字列をjsのオブジェクトとして返し
②それぞれのitemsの要素に対してcss、htmlの要素の中身を入れている

という認識で良いでしょうか?

function(i,item)のところにiが入っていますが、これはどこに影響を与えているのでしょうか?

長々とすみませんがご回答いただければ嬉しいです!
2016/02/17 21:03

ぴよよ
↓ 目次8からHTMLのheadの部分の記述が・・・スミマセン
2016/02/06 01:34

ぴよよ
これまでスムーズにできたのですが、今回わからないです><;
2016/02/06 01:31

UT
わかりやすいですね!感謝します。
2016/01/26 10:02

こっぺぱん
ありがとです
2016/01/19 15:32

残りを読む »