SQLの窓 イラストAC フリー素材

2016年06月11日

geolocation を使用して『都道府県選択コンボボックス』の初期値を現在の緯度・経度から選択する

2016/06/10
2016年4月ごろから、Google Chrome の仕様変更により、全て https の環境でないと geolocation が動作しなくなりました。( 参考記事 / 注 : localhost は動作します )


なので、このブログ内では動作しないので、自分のサイトにデモサンプルを設置しました。

1) 各都道府県の頭に頭文字のアルファベット追加するだけでも楽になる。
2) 今時なんだから、緯度経度から選択

HTML ページ
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){

	$("#action").on("click",function(){
		navigator.geolocation.getCurrentPosition(function(target){
			$.get("https://lightbox.sakura.ne.jp/toolbox/g_ken.php?lat="
				+target.coords.latitude
				+"&lng="+target.coords.longitude,
				function(data){
					console.dir(data);
					console.log( data.prefectureCode );
					$("select[name='ken']").val(data.prefectureCode);
				});
		});
	});


});
</script>
</head>
<body>
<select name="ken">
	<option value="1">h 北海道</option>
	<option value="2">a 青森県</option>
	<option value="3">i 岩手県</option>
	<option value="4">m 宮城県</option>
	<option value="5">a 秋田県</option>
	<option value="6">y 山形県</option>
	<option value="7">f 福島県</option>
	<option value="8">i 茨城県</option>
	<option value="9">t 栃木県</option>
	<option value="10">g 群馬県</option>
	<option value="11">s 埼玉県</option>
	<option value="12">c 千葉県</option>
	<option value="13">t 東京都</option>
	<option value="14">k 神奈川県</option>
	<option value="15">n 新潟県</option>
	<option value="16">t 富山県</option>
	<option value="17">i 石川県</option>
	<option value="18">f 福井県</option>
	<option value="19">y 山梨県</option>
	<option value="20">n 長野県</option>
	<option value="21">g 岐阜県</option>
	<option value="22">s 静岡県</option>
	<option value="23">a 愛知県</option>
	<option value="24">m 三重県</option>
	<option value="25">s 滋賀県</option>
	<option value="26">k 京都府</option>
	<option value="27">o 大阪府</option>
	<option value="28">h 兵庫県</option>
	<option value="29">n 奈良県</option>
	<option value="30">w 和歌山県</option>
	<option value="31">t 鳥取県</option>
	<option value="32">s 島根県</option>
	<option value="33">o 岡山県</option>
	<option value="34">h 広島県</option>
	<option value="35">y 山口県</option>
	<option value="36">t 徳島県</option>
	<option value="37">k 香川県</option>
	<option value="38">a 愛媛県</option>
	<option value="39">k 高知県</option>
	<option value="40">f 福岡県</option>
	<option value="41">s 佐賀県</option>
	<option value="42">n 長崎県</option>
	<option value="43">k 熊本県</option>
	<option value="44">o 大分県</option>
	<option value="45">m 宮崎県</option>
	<option value="46">k 鹿児島県</option>
	<option value="47">o 沖縄県</option>
</select>
<input id="action" type="button" value="ブラウザの緯度経度で選択">
</body>
</html>


PHP
<?php
header( "Content-Type: application/json; Charset=utf-8" );
header( "pragma: no-cache" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "Cache-control: no-cache" );
header( "Access-Control-Allow-Origin: *" );

mb_internal_encoding('UTF-8');

$LIB_DIR = realpath(dirname(__FILE__).'/dgmsrc/').'/';
require_once $LIB_DIR.'Dm/Geocoder.php';
require_once $LIB_DIR.'Dm/Geocoder/Address.php';
require_once $LIB_DIR.'Dm/Geocoder/Prefecture.php';
require_once $LIB_DIR.'Dm/Geocoder/Query.php';
require_once $LIB_DIR.'Dm/Geocoder/GISCSV.php';
require_once $LIB_DIR.'Dm/Geocoder/GISCSV/Finder.php';
require_once $LIB_DIR.'Dm/Geocoder/GISCSV/Reader.php';

$addresses = Dm_Geocoder::reverseGeocode($_GET['lat'],$_GET['lng']);
print json_encode($addresses[0]);
使用した PHP ライブラリ


タグ:PHP
【JavaScriptの最新記事】
posted by at 2016-06-11 01:13 | Comment(0) | JavaScript | このブログの読者になる | 更新情報をチェックする
SQLの窓全体の検索
Custom Search
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX