位置情報をgeoで取得し、データベースの店舗を現在地をもとに出力したい。

端末の現在からデータベースに登録しているお店を出力するシステムを作ろうと考えています。

【現状】
・Geolocation APIを使い現在の取得はできています。（下記ページを参考にしました。）
→https://syncer.jp/how-to-use-geolocation-api
・mysqlに店舗を１５件ほど登録しています。

【実装できていない部分】
・現在地をもとに市、区単位でデータベースに登録している店舗情報を出力したい。
例）現在が「東京都品川区北品川1-1-1」の場合「東京都品川区北品川」でデータベースに住所登録されている店舗を出力したい。

どのようにしたら出力できるようにできますでしょうか？

一応ではありますが、GeolocationApiのソースを張っておきます。

html
1<!DOCTYPE html>
2<html>
3	<head>
4		<meta charset="UTF-8">
5		<meta name="robots" content="noindex,nofollow">
6
7		<!-- ビューポートの設定 -->
8		<meta name="viewport" content="width=device-width, initial-scale=1.0">
9
10		<!-- スタイルシートの読み込み -->
11		<link href="geolocation-api.css" rel="stylesheet">
12		<script type="text/javascript" src="./js/position.js"></script>
13
14
15
16		<title>[getCurrentPosition()]のサンプルデモ (Geolocation API)</title><!--
17
18/********************************************************************************
19
20	SYNCER 〜 知識、感動をみんなと同期(Sync)するブログ
21
22	* 配布場所
23	https://syncer.jp/how-to-use-geolocation-api
24
25	* 動作確認
26	https://syncer.jp/how-to-use-geolocation-api/demo/get-current-position.html
27
28	* 最終更新日時
29	2015/08/16 01:24
30
31	* 作者
32	あらゆ
33
34	** 連絡先
35	Twitter: https://twitter.com/arayutw
36	Facebook: https://www.facebook.com/arayutw
37	Google+: https://plus.google.com/114918692417332410369/
38	E-mail: info@syncer.jp
39
40	※ バグ、不具合の報告、提案、ご要望など、お待ちしております。
41	※ 申し訳ありませんが、ご利用者様、個々の環境における問題はサポートしていません。
42
43********************************************************************************/
44
45		-->
46	</head>
47<body>
48
49
50
51<h1 style="text-align:center;color:#d36015;">[getCurrentPosition()]のサンプルデモ (Geolocation API)</h1>
52<p>Geolocation APIの[getCurrentPosition()]を利用して、ユーザーの現在位置を取得するサンプルデモです。</p>
53
54<HR style="margin: 3em 0 ;">
55
56<h2>取得したデータ</h2>
57
58	<p>下記の位置情報を取得することができました。</p>
59
60	<dl id="result"></dl>
61
62<!-- <h2>地図</h2> -->
63
64	<!-- <p>Google Mapsに、位置情報を反映させたものです。</p>
65
66	<div class="map-wrapper">
67		<div id="map-canvas"></div>
68	</div> -->
69
70
71<HR style="margin: 3em 0 ;">
72
73
74
75<!-- <p style="text-align:center"><a href="https://syncer.jp/how-to-use-geolocation-api">配布元: Syncer</a></p> -->
76
77
78
79
80<!-- JavaScriptの読み込み -->
81<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7Pxqp7Asgi6D4eOtkCxnir5xPiIwY3EE"></script>
82<script src="get-current-position.js"></script>
83
84
85
86
87</body>
88</html>
89

JavaScript
1
2// ユーザーの端末がGeoLocation APIに対応しているかの判定
3
4// 対応している場合
5if( navigator.geolocation )
6{
7	// 現在地を取得
8	navigator.geolocation.getCurrentPosition(
9
10		// [第1引数] 取得に成功した場合の関数
11		function( position )
12		{
13			// 取得したデータの整理
14			var data = position.coords ;
15
16			// データの整理
17			var lat = data.latitude ;
18			var lng = data.longitude ;
19			var alt = data.altitude ;
20			var accLatlng = data.accuracy ;
21			var accAlt = data.altitudeAccuracy ;
22			var heading = data.heading ;			//0=北,90=東,180=南,270=西
23			var speed = data.speed ;
24
25			// アラート表示
26//			alert( "あなたの現在位置は、\n[" + lat + "," + lng + "]\nです。" ) ;
27
28			// HTMLへの書き出し
29			document.getElementById( 'result' ).innerHTML = '<dl><dt>緯度</dt><dd>' + lat + '</dd><dt>経度</dt><dd>' + lng + '</dd><dt>高度</dt><dd>' + alt + '</dd><dt>緯度、経度の精度</dt><dd>' + accLatlng + '</dd><dt>高度の精度</dt><dd>' + accAlt + '</dd><dt>方角</dt><dd>' + heading + '</dd><dt>速度</dt><dd>' + speed + '</dd></dl>' ;
30
31			// 位置情報
32			var latlng = new google.maps.LatLng( lat , lng ) ;
33
34			// Google Mapsに書き出し
35			// var map = new google.maps.Map( document.getElementById( 'map-canvas' ) , {
36			// 	zoom: 15 ,				// ズーム値
37			// 	center: latlng ,		// 中心座標 [latlng]
38			// } ) ;
39
40			// マーカーの新規出力
41			new google.maps.Marker( {
42				map: map ,
43				position: latlng ,
44			} ) ;
45		},
46
47		// [第2引数] 取得に失敗した場合の関数
48		function( error )
49		{
50			// エラーコード(error.code)の番号
51			// 0:UNKNOWN_ERROR				原因不明のエラー
52			// 1:PERMISSION_DENIED			利用者が位置情報の取得を許可しなかった
53			// 2:POSITION_UNAVAILABLE		電波状況などで位置情報が取得できなかった
54			// 3:TIMEOUT					位置情報の取得に時間がかかり過ぎた…
55
56			// エラー番号に対応したメッセージ
57			var errorInfo = [
58				"原因不明のエラーが発生しました…。" ,
59				"位置情報の取得が許可されませんでした…。" ,
60				"電波状況などで位置情報が取得できませんでした…。" ,
61				"位置情報の取得に時間がかかり過ぎてタイムアウトしました…。"
62			] ;
63
64			// エラー番号
65			var errorNo = error.code ;
66
67			// エラーメッセージ
68			var errorMessage = "[エラー番号: " + errorNo + "]\n" + errorInfo[ errorNo ] ;
69
70			// アラート表示
71			alert( errorMessage ) ;
72
73			// HTMLに書き出し
74			document.getElementById("result").innerHTML = errorMessage;
75		} ,
76
77		// [第3引数] オプション
78		{
79			"enableHighAccuracy": false,
80			"timeout": 8000,
81			"maximumAge": 2000,
82		}
83
84	) ;
85}
86
87// 対応していない場合
88else
89{
90	// エラーメッセージ
91	var errorMessage = "お使いの端末は、GeoLacation APIに対応していません。" ;
92
93	// アラート表示
94	alert( errorMessage ) ;
95
96	// HTMLに書き出し
97	document.getElementById( 'result' ).innerHTML = errorMessage ;
98}
99