質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.77%

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

受付中

回答 0

投稿

  • 評価
  • クリップ 1
  • VIEW 409

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

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

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

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="robots" content="noindex,nofollow">

        <!-- ビューポートの設定 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- スタイルシートの読み込み -->
        <link href="geolocation-api.css" rel="stylesheet">
        <script type="text/javascript" src="./js/position.js"></script>



        <title>[getCurrentPosition()]のサンプルデモ (Geolocation API)</title><!--

/********************************************************************************

    SYNCER 〜 知識、感動をみんなと同期(Sync)するブログ

    * 配布場所
    https://syncer.jp/how-to-use-geolocation-api

    * 動作確認
    https://syncer.jp/how-to-use-geolocation-api/demo/get-current-position.html

    * 最終更新日時
    2015/08/16 01:24

    * 作者
    あらゆ

    ** 連絡先
    Twitter: https://twitter.com/arayutw
    Facebook: https://www.facebook.com/arayutw
    Google+: https://plus.google.com/114918692417332410369/
    E-mail: info@syncer.jp

    ※ バグ、不具合の報告、提案、ご要望など、お待ちしております。
    ※ 申し訳ありませんが、ご利用者様、個々の環境における問題はサポートしていません。

********************************************************************************/

        -->
    </head>
<body>



<h1 style="text-align:center;color:#d36015;">[getCurrentPosition()]のサンプルデモ (Geolocation API)</h1>
<p>Geolocation APIの[getCurrentPosition()]を利用して、ユーザーの現在位置を取得するサンプルデモです。</p>

<HR style="margin: 3em 0 ;">

<h2>取得したデータ</h2>

    <p>下記の位置情報を取得することができました。</p>

    <dl id="result"></dl>

<!-- <h2>地図</h2> -->

    <!-- <p>Google Mapsに、位置情報を反映させたものです。</p>

    <div class="map-wrapper">
        <div id="map-canvas"></div>
    </div> -->


<HR style="margin: 3em 0 ;">



<!-- <p style="text-align:center"><a href="https://syncer.jp/how-to-use-geolocation-api">配布元: Syncer</a></p> -->




<!-- JavaScriptの読み込み -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7Pxqp7Asgi6D4eOtkCxnir5xPiIwY3EE"></script>
<script src="get-current-position.js"></script>




</body>
</html>
// ユーザーの端末がGeoLocation APIに対応しているかの判定

// 対応している場合
if( navigator.geolocation )
{
    // 現在地を取得
    navigator.geolocation.getCurrentPosition(

        // [第1引数] 取得に成功した場合の関数
        function( position )
        {
            // 取得したデータの整理
            var data = position.coords ;

            // データの整理
            var lat = data.latitude ;
            var lng = data.longitude ;
            var alt = data.altitude ;
            var accLatlng = data.accuracy ;
            var accAlt = data.altitudeAccuracy ;
            var heading = data.heading ;            //0=北,90=東,180=南,270=西
            var speed = data.speed ;

            // アラート表示
//            alert( "あなたの現在位置は、\n[" + lat + "," + lng + "]\nです。" ) ;

            // HTMLへの書き出し
            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>' ;

            // 位置情報
            var latlng = new google.maps.LatLng( lat , lng ) ;

            // Google Mapsに書き出し
            // var map = new google.maps.Map( document.getElementById( 'map-canvas' ) , {
            //     zoom: 15 ,                // ズーム値
            //     center: latlng ,        // 中心座標 [latlng]
            // } ) ;

            // マーカーの新規出力
            new google.maps.Marker( {
                map: map ,
                position: latlng ,
            } ) ;
        },

        // [第2引数] 取得に失敗した場合の関数
        function( error )
        {
            // エラーコード(error.code)の番号
            // 0:UNKNOWN_ERROR                原因不明のエラー
            // 1:PERMISSION_DENIED            利用者が位置情報の取得を許可しなかった
            // 2:POSITION_UNAVAILABLE        電波状況などで位置情報が取得できなかった
            // 3:TIMEOUT                    位置情報の取得に時間がかかり過ぎた…

            // エラー番号に対応したメッセージ
            var errorInfo = [
                "原因不明のエラーが発生しました…。" ,
                "位置情報の取得が許可されませんでした…。" ,
                "電波状況などで位置情報が取得できませんでした…。" ,
                "位置情報の取得に時間がかかり過ぎてタイムアウトしました…。"
            ] ;

            // エラー番号
            var errorNo = error.code ;

            // エラーメッセージ
            var errorMessage = "[エラー番号: " + errorNo + "]\n" + errorInfo[ errorNo ] ;

            // アラート表示
            alert( errorMessage ) ;

            // HTMLに書き出し
            document.getElementById("result").innerHTML = errorMessage;
        } ,

        // [第3引数] オプション
        {
            "enableHighAccuracy": false,
            "timeout": 8000,
            "maximumAge": 2000,
        }

    ) ;
}

// 対応していない場合
else
{
    // エラーメッセージ
    var errorMessage = "お使いの端末は、GeoLacation APIに対応していません。" ;

    // アラート表示
    alert( errorMessage ) ;

    // HTMLに書き出し
    document.getElementById( 'result' ).innerHTML = errorMessage ;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • Lhankor_Mhy

    2019/03/16 16:36

    『現在が「東京都品川区北品川1-1-1」の場合「東京都品川区北品川」でデータベースに住所登録されている店舗』とのことですが、前方一致じゃダメなのですか?

    キャンセル

  • kings_of_king12

    2019/03/16 16:41

    ありがとうござます。
    前方一致でも構いません。

    キャンセル

  • Lhankor_Mhy

    2019/03/16 16:45

    それで解決するわけではないのですね。問題になっているのはどういう点ですか?

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る