AngularJSとPHPを使用して任意の場所の短くて一意のデジタルアドレスを生成する方法

投稿日: 2019-11-08 2022-08-02
タグ: Development, javascript, php, ubuntu, Ubuntu 18.04

序章

住所は通常長く、覚えにくい場合があります。短いアドレスが望ましいシナリオはいくつかあります。たとえば、数文字だけで構成される短いアドレスを送信できると、緊急救急車サービスをより迅速に提供できます。 PieterGeelenとHaroldGoddijnは、2001年にマップコードシステムを開発し、世界中のあらゆる物理アドレスの短い形式のアドレスを簡単に作成できるようにしました。

このチュートリアルでは、Google Maps APIを使用して、選択した任意のアドレスの短いデジタルアドレスを生成するWebアプリを開発します。これを行うには、GitHubからこのアプリのベースコードを複製し、完全に機能するコードを追加します。このアプリは、特定のマップコードから元の物理アドレスを取得することもできます。

前提条件

このチュートリアルを完了するには、次のものが必要です。

Ubuntu18.04サーバーへのアクセス。このサーバーには、root以外のユーザーが必要です。 sudo 特権とファイアウォールが構成されています。これを設定するには、 Ubuntu18.04の初期サーバー設定ガイドに従ってください。
マシンにインストールされているLAMPスタック。このチュートリアルで開発するアプリケーションはAngularJSとPHPを使用し、アプリケーションが生成するデジタルアドレスはMySQLデータベースに保存されるため、これが必要です。 Linux、Apache、MySQL、PHP（LAMP）スタックをUbuntu 18.04 にインストールする方法に関するガイドに従って、これを設定してください。
サーバーにGitがインストールされています。チュートリアルオープンソースへの貢献：Git入門に従って、Gitをインストールおよびセットアップできます。

ステップ1—GoogleAPIキーを取得する

このチュートリアルでは、JavaScriptを使用してGoogleマップへのインターフェイスを作成します。 GoogleはAPIキーを割り当てて、開発者がGoogleマップでJavaScript APIを使用できるようにします。これを取得して、ウェブアプリのコードに追加する必要があります。

独自のAPIキーを取得するには、Googleの「GetAPIKey」ページにアクセスしてください。手順1のGETSTARTED ボタンをクリックすると、次の画像に示すようなポップアップが開きます。

チェックボックスをクリックしてマップを選択し、続行をクリックします。 Googleアカウントにまだログインしていない場合は、ログインするように求められます。次に、ウィンドウでプロジェクトの名前を指定するように求められます。名前は任意の名前にすることができます。

これに続いて、請求情報の入力を求められます。 Googleは無料トライアルの一部としてAPIキーを提供していますが、APIキーを取得するには、課金を設定して有効にする必要があることに注意してください。

この情報を入力すると、APIキーが画面に表示されます。後でプロジェクトコードに追加する必要があるため、簡単に取得できる場所にコピーして保存します。

APIキーを取得したら、MySQLデータベースを作成してアプリケーションの基盤を構築し始めることができます。

ステップ2—データベースの作成

このチュートリアルで説明するWebアプリケーションは、ユーザーからのアドレスを受け入れ、指定された場所の緯度と経度とともにそのアドレスのマップコードを生成します。このデータをMySQLデータベースに保存して、後でそれぞれのデジタルアドレスを入力するだけで取得できるようにします。

MySQLシェルを開き、パスワードで認証することから始めます。

mysql -u root -p

プロンプトで、というデータベースを作成します digitaladdress 次のコマンドを使用します。

CREATE DATABASE IF NOT EXISTS `digitaladdress`;

次に、この新しいデータベースを選択して、その中にテーブルを作成できるようにします。

USE `digitaladdress`;

を選択した後 digitaladdress データベース、というテーブルを作成します locations その中に、アプリケーションがこのデータから作成する物理アドレス、経度、緯度、およびマップコードを格納します。次を実行します CREATE TABLE 作成するステートメント locations データベース内のテーブル：

CREATE TABLE `locations` (
  `digitaladdress` varchar(50) DEFAULT NULL,
  `state` varchar(30) DEFAULT NULL,
  `zip` varchar(30) DEFAULT NULL,
  `street` varchar(30) DEFAULT NULL,
  `town` varchar(30) DEFAULT NULL,
  `house` varchar(30) DEFAULT NULL,
  `latitude` varchar(30) DEFAULT NULL,
  `longitude` varchar(30) DEFAULT NULL,
  KEY `digitaladdress` (`digitaladdress`)
);

このテーブルには8つの列があります。 digitaladdress, state, zip, street, town, house, latitude、と longitude. 最初の列、 digitaladdress、はインデックス付きであり、 KEY 指図。 MySQLのインデックスは、百科事典やその他の参考書での動作と同じように機能します。あなたまたはあなたのアプリケーションが以下を含むクエリを発行するときはいつでも WHERE ステートメントでは、MySQLは各列のすべてのエントリを行ごとに読み取ります。これは、テーブルにエントリが増えるにつれて、非常にリソースを消費するプロセスになる可能性があります。このように列にインデックスを付けると、列からデータが取得され、アルファベット順に別の場所に保存されます。つまり、MySQLはテーブルのすべての行を調べる必要がありません。インデックスで探しているデータを見つけて、テーブルの対応する行にジャンプするだけです。

このテーブルを追加したら、MySQLプロンプトを終了します。

exit

データベースとテーブルを設定し、Google Maps APIキーを手元に置いたら、プロジェクト自体を作成する準備が整います。

ステップ3—プロジェクトの作成

イントロダクションで述べたように、GitHubからこのプロジェクトのベースコードを複製してから、アプリケーションを機能させるためにいくつかのコードを追加します。この理由は、各ファイルを作成してすべてのコードを自分で追加するプロセスを説明するのではなく、アプリを実行するプロセスを高速化するためです。また、アプリがGoogleMapsとMapcodeAPIの両方と通信できるようにするコードの追加と理解に集中できるようになります。

プロジェクト全体のスケルトンコードは、このGitHubプロジェクトページにあります。以下を使用してください git プロジェクトをサーバーに複製するコマンド：

git clone https://github.com/do-community/digiaddress.git

これにより、という新しいフォルダが作成されます digiaddress ホームディレクトリにあります。このディレクトリをサーバーのWebルートに移動します。前提条件にリンクされているLAMPスタックチュートリアルに従った場合、これは /var/www/html ディレクトリ：

sudo mv digiaddress/ /var/www/html/

このプロジェクトにはいくつかのPHPファイルとJSファイルが含まれており、このチュートリアルの後半でコードを追加します。ディレクトリ構造を表示するには、最初に tree を使用したパッケージ apt:

sudo apt install tree

次に、を実行します tree とのコマンド digiaddress 引数として指定されたディレクトリ：

tree /var/www/html/digiaddress/

Outputdigiaddress/
├── README.md
├── db.php
├── fetchaddress.php
├── findaddress.php
├── generateDigitalAddress.php
├── geoimplement.php
├── index.php
└── js
    ├── createDigitialAddressApp.js
    └── findAddressApp.js

この出力から、プロジェクトが6つのPHPファイルと2つのJavaScriptファイルで構成されていることがわかります。これらのファイルを組み合わせることで、アプリケーションの2つの主要な機能が作成されます。物理アドレスからマップコードを作成することと、マップコードをデコードして元の物理アドレスを取得することです。次のファイルは、最初の機能を有効にします。

index.php
geoimplement.php
generateDigitialAddress.php
db.php
createDigitialAddressApp.js

The index.php ファイルには、アプリケーションのユーザーインターフェイス（UI）のコードが含まれています。このコードは、ユーザーが物理アドレスを入力できるフォームで構成されています。 The index.php ファイルは geoimplement.php ユーザーがフォームを送信するたびにファイルします。 geoimplement.php Google Maps APIを呼び出し、アドレスを渡します。次に、Googleサーバーは、緯度や経度など、指定されたアドレスの情報を含むJSONで応答します。次に、この情報はに渡されます generateDigitalAddress.php Mapcode APIを呼び出して、緯度と経度で指定された特定の場所のマップコードを取得するファイル。結果のマップコードは、緯度、経度、および物理アドレスとともに、手順2で作成したデータベースに保存されます。 db.php この操作のヘルパーとして機能します。 The createDigitalAddressApp.js fileは、Googleマップインターフェイスでのマーカーや境界の長方形の設定など、アプリに表示されるUX要素を制御する多くの操作を実行します。

残りの3つのファイルは、アプリケーションの2番目の機能、つまり、指定されたマップコードから物理アドレスを取得できるようにします。

findaddress.php
fetchaddress.php
findAddressApp.js

The findaddress.php fileは、アプリケーションUIを定義します。これは、で定義されているものとは異なります。 index.php. アプリケーションは、以前に生成されたマップコードを入力として受け入れ、データベースに保存されている対応する物理アドレスを表示します。ユーザーがこのフォームを送信するたびに、 findaddress.php に呼び出しを送信します fetchaddress.php 次に、データベースからそれぞれのマップコードを取得します。 The findAddressApp.js ファイルには、Googleマップインターフェースでマーカーと境界長方形を設定するためのヘルパーコードが含まれています。

にアクセスしてインストールをテストします http://your_server_ip/digiaddress ブラウザで、必ず変更してください your_server_ip サーバーのIPアドレスを反映します。

注：サーバーのIPアドレスがわからない場合は、次のコマンドを実行できます curl 指図。このコマンドは、のページコンテンツを出力します icanhazip.com、それにアクセスするマシンのIPアドレスを表示するWebサイト：

curl http://icanhazip.com

そこに到達すると、ブラウザウィンドウの上部に次の見出しが表示されます。

Generate Digital Address

これにより、プロジェクトファイルが正しくダウンロードされたことを確認できます。それでは、アプリの主な機能であるマップコードの生成に進みましょう。

ステップ4—アプリケーションのUIを開発する

アプリケーションインターフェイスのボイラープレートコードは、前の手順でダウンロードしたファイルに含まれていますが、アプリケーションを機能させてユーザーにとって魅力的なものにするために、これらのファイルの一部にいくつかの変更と追加を行う必要があります。アプリケーションのUIを開発するためのコードの更新から始めます。

を開きます index.php お好みのエディタを使用してファイルします。ここでは、 nano:

nano /var/www/html/digiaddress/index.php

次のコード行を探します。

/var/www/html/digiaddress/index.php

. . .
<script async defer src="https://maps.googleapis.com/maps/api/js?key=<YOUR KEY>"></script>
. . .

交換 <YOUR KEY> 手順1で取得したGoogleAPIキーを使用します。 APIキーを追加すると、行は次のようになります。

/var/www/html/digiaddress/index.php

. . .
<script async defer src="https://maps.googleapis.com/maps/api/js?key=ExampleAPIKeyH2vITfv1eIHbfka9ym634Esw7u"></script>
. . .

次に、で次のコメントを見つけます index.php ファイル：

/var/www/html/digiaddress/index.php

. . .
            <!-- add form code here -->
. . .

このコメントの下に数十行のコードを追加します。これにより、アプリケーションがマップコードを生成するために使用する物理的な場所のアドレスをユーザーが入力できるフォームが作成されます。このコメントの下に、フォームの上部に EnterAddressというタイトルを作成する次の強調表示されたコードを追加します。

/var/www/html/digiaddress/index.php

. . .
            <!-- add form code here -->

            <div class="form-border spacing-top">
                <div class="card-header" style="background:#cc0001; color:#ffff">
                    <h5>Enter Address</h5>
                </div>
                <div class="extra-padding">
. . .

この下に、次のHTMLコードを追加します。これにより、ユーザーが情報を入力する5つのテキストフィールド（および適切なラベル）を含むフォームが作成されます。

/var/www/html/digiaddress/index.php

                . . .
                <form>
                        <div class="form-group input-group-sm">
                            <label for="state">State</label>
                            <input type="text" class="form-control rounded-0 textbox-border" id="state"
                                   placeholder="" ng-model="address.state"/>
                        </div>
                        <div class="form-group input-group-sm">
                            <label for="zip" class="animated-label">Zip</label>
                            <input type="text" class="form-control rounded-0 textbox-depth textbox-border"
                                   id="zip" ng-model="address.zip" disabled="disabled"/>
                        </div>
                        <div class="form-group input-group-sm">
                            <label for="town">Town</label>
                            <input type="text" class="form-control rounded-0 textbox-border"
                                   id="town" ng-model="address.town" disabled="disabled"/>
                        </div>
                        <div class="form-group input-group-sm">
                            <label for="street">Street</label>
                            <input type="text" class="form-control rounded-0 textbox-border" id="street"
                                   placeholder="" ng-model="address.street" disabled="disabled"/>
                        </div>
                        <div class="form-group input-group-sm">
                            <label for="house">House</label>
                            <input type="text" class="form-control rounded-0 textbox-border" id="house"
                                   placeholder="" ng-model="address.house" disabled="disabled"/>
                        </div>
                 . . .

フォームコードの下に、次の行を追加します。これらは、フォームを介して送信された任意のアドレスから取得された緯度と経度の情報を渡す2つの非表示のコントロールを作成します。

/var/www/html/digiaddress/index.php

                            . . .
                            <div class="form-group input-group-sm">
                                <input type="hidden" ng-model="address.lat"/>
                            </div>
                            <div class="form-group input-group-sm">
                                <input type="hidden" ng-model="address.long"/>
                            </div>
                            . . .

最後に、次のコードを追加してこのセクションを閉じます。これにより、生成ボタンが作成され、ユーザーは次のフォームを送信できるようになります。

/var/www/html/digiaddress/index.php

                            . . .
                            <button type="submit" disabled="disabled" class="btn btn-color btn-block rounded-0" id="generate"
                                    style="color:#ffff;background-color: #cc0001;">Generate
                            </button>
                    </form>
                </div>
            </div>
        . . .

これらの要素を追加した後、ファイルのこのセクションは次のように一致する必要があります。

/var/www/html/digiaddress/index.php

. . .
            <!-- add form code here -->

            <div class="form-border spacing-top">
                <div class="card-header" style="background:#cc0001; color:#ffff">
                    <h5>Enter Address</h5>
                </div>
                <div class="extra-padding">
                    <form>    
                            <div class="form-group input-group-sm">
                                <label for="state">State</label>
                                <input type="text" class="form-control rounded-0 textbox-border" id="state"
                                       placeholder="" ng-model="address.state"/>
                            </div>
                            <div class="form-group input-group-sm">
                                <label for="zip" class="animated-label">Zip</label>
                                <input type="text" class="form-control rounded-0 textbox-depth textbox-border"
                                       id="zip" ng-model="address.zip" disabled="disabled"/>
                            </div>
                            <div class="form-group input-group-sm">
                                <label for="town">Town</label>
                                <input type="text" class="form-control rounded-0 textbox-border "
                                       id="town" ng-model="address.town" disabled="disabled"/>
                            </div>
                            <div class="form-group input-group-sm">
                                <label for="street">Street</label>
                                <input type="text" class="form-control rounded-0 textbox-border" id="street"
                                       placeholder="" ng-model="address.street" disabled="disabled"/>
                            </div>
                            <div class="form-group input-group-sm">
                                <label for="house">House</label>
                                <input type="text" class="form-control rounded-0 textbox-border" id="house"
                                       placeholder="" ng-model="address.house" disabled="disabled"/>
                            </div>

                            <div class="form-group input-group-sm">
                                <input type="hidden" ng-model="address.lat"/>
                            </div>
                            <div class="form-group input-group-sm">
                                <input type="hidden" ng-model="address.long"/>
                            </div>
                            <button type="submit" disabled="disabled" class="btn btn-color btn-block rounded-0" id="generate"
                                    style="color:#ffff;background-color: #cc0001;">Generate
                            </button>
                    </form>
                </div>
            </div>
            <br>
        </div>

        <!-- add google map control -->
                    . . .

を押してファイルを保存します CTRL+O それから ENTER、次にブラウザでアプリケーションに再度アクセスします。

http://your_server_ip/digiaddress

新しく追加されたフォームフィールドとGenerateボタンが表示され、アプリケーションは次のようになります。

この時点で、フォームに住所情報を入力して生成ボタンをクリックしようとしても、何も起こりません。マップコード生成機能は後で追加しますが、最初に、ユーザーが操作できるマップを追加して、このページをより視覚的に魅力的なものにすることに焦点を当てましょう。

ステップ5—Googleマップコントロールを追加する

マップがGoogleMapsJavaScript APIを介してWebサイトに表示される場合、マップには、訪問者が表示されているマップを操作できるようにするユーザーインターフェイス機能が含まれています。これらの機能は、コントロールとして知られています。編集を続けます index.php このアプリにGoogleマップのコントロールを追加するファイルを作成すると、ユーザーは入力フォームの横にある地図を表示したり、ドラッグしてさまざまな場所を表示したり、ズームインとズームアウトしたり、Googleの地図、衛星、通りの景色。

内で次のコメントを見つけてください index.php ファイル：

/var/www/html/digiaddress/index.php

. . .
<!-- add google map control -->
. . .

このコメントの下に次の強調表示されたコードを追加します。

/var/www/html/digiaddress/index.php

. . .
        <!-- add google map control -->

        <div class="col-sm-8 map-align" ng-init="initMap()">
            <div id="map" class="extra-padding" style="height: 100%;
            margin-bottom: 15px;"></div>
            <label id="geocoordinates" ng-show="latlng" ng-model="lt"></label><br/>
            <label id="geoaddress" ng-show="address" ng-model="padd"></label>
            </div>
        </div>
. . .

ファイルを保存してから、ブラウザでアプリケーションに再度アクセスします。次のように表示されます。

ご覧のとおり、アプリケーションにマップが正常に追加されました。地図をドラッグしてさまざまな場所に焦点を合わせたり、ズームインとズームアウトしたり、地図、衛星、ストリートビューを切り替えたりすることができます。追加したコードを振り返ると、フォームに入力された地理座標と物理アドレスを表示する2つのラベルコントロールも追加されていることに注意してください。

/var/www/html/digiaddress/index.php

            . . .
            <label id="geocoordinates" ng-show="latlng" ng-model="lt"></label><br/>
            <label id="geoaddress" ng-show="address" ng-model="padd"></label>
            . . .

ブラウザでアプリケーションに再度アクセスし、最初のフィールドに州の名前を入力します。テキストカーソルを次のフィールドに移動すると、緯度と経度のラベルは表示されません。また、入力した情報を反映して地図に表示される場所が変更されることもありません。これらの動作を有効にしましょう。

ステップ6—イベントリスナーを追加する

アプリケーションにインタラクティブな要素を追加すると、ユーザーの関心を維持するのに役立ちます。 イベントリスナーを使用して、このアプリケーションにいくつかのインタラクティブな動作を実装します。

イベントは、Webページで発生するアクションです。イベントは、ユーザーまたはブラウザー自体によって実行されるものにすることができます。一般的なイベントの例は次のとおりです。

HTMLボタンをクリックする
入力フィールドの内容を変更する
あるページ要素から別のページ要素にフォーカスを変更する

イベントリスナーは、特定のイベントが発生したときに特定のアクションを実行するようにプログラムに指示するディレクティブです。 AngularJSでは、イベントリスナーは一般的に次の形式に従うディレクティブで定義されます。

ng-event_type=expression

このステップでは、ユーザーがフォームを送信するたびに、ユーザーがマップコードに入力した情報を処理するのに役立つイベントリスナーを追加します。また、アプリケーションをよりインタラクティブにするイベントリスナーをさらにいくつか追加します。具体的には、これらのリスナーを使用して、アプリケーションマップに表示される場所を変更し、マーカーを配置し、ユーザーがフォームに情報を入力するときに場所の周囲に長方形を描画します。これらのイベントリスナーをに追加します index.php、ファイルを閉じた場合は、そのファイルをもう一度開きます。

nano /var/www/html/digiaddress/index.php

追加したコードの最初のバッチまでスクロールダウンし、で始まるブロックを見つけます <form>. 次のようになります。

/var/www/html/digiaddress/index.php

                . . .
                    <form>
                            <div class="form-group input-group-sm">
                                <label for="state">State</label>
                                <input type="text" class="form-control rounded-0 textbox-border" id="state"
                                       placeholder="" ng-model="address.state"/>
                            </div>
                            <div class="form-group input-group-sm">
                                <label for="zip" class="animated-label">Zip</label>
                                <input type="text" class="form-control rounded-0 textbox-depth textbox-border"
                                       id="zip" ng-model="address.zip" disabled="disabled"/>
                            </div>
                            <div class="form-group input-group-sm">
                                <label for="town">Town</label>
                                <input type="text" class="form-control rounded-0 textbox-border"
                                       id="town" ng-model="address.town" disabled="disabled"/>
                            </div>
                            <div class="form-group input-group-sm">
                                <label for="street">Street</label>
                                <input type="text" class="form-control rounded-0 textbox-border" id="street"
                                       placeholder="" ng-model="address.street" disabled="disabled"/>
                            </div>
                            <div class="form-group input-group-sm">
                                <label for="house">House</label>
                                <input type="text" class="form-control rounded-0 textbox-border" id="house"
                                       placeholder="" ng-model="address.house" disabled="disabled"/>
                            </div>
                    </form>
. . .

まず、次の強調表示されたイベントリスナーをオープニングに追加します <form> 鬼ごっこ。このコードは、アプリにを呼び出すように指示します processForm ユーザーがフォームを介して情報を送信するたびに機能します。 processForm で定義されています createDigitalAddressApp.js ファイルであり、ユーザーから送信された情報を適切なファイルに送信し、それをマップコードに処理するヘルパー関数として機能します。ステップ7でこの関数を詳しく見ていきます。

/var/www/html/digiaddress/index.php

                . . .
                    <form ng-submit="processForm()" class="custom-form">
                            <div class="form-group input-group-sm">
                                <label for="state">State</label>
                                <input type="text" class="form-control rounded-0 textbox-border" id="state"
                                       placeholder="" ng-model="address.state"
                            </div>
                . . .

次に、いくつか追加してこのブロックの編集を続けます blur イベントリスナー。 A blur 特定のページ要素がフォーカスを失ったときにイベントが発生します。次の強調表示された行をに追加します form ブロックの input タグ。これらの行は、アプリケーションにを呼び出すように指示します geocodeAddress ユーザーのフォーカスがステップ4で作成したそれぞれのフォームフィールドから離れたときに機能します。スラッシュと大なり記号も削除する必要があることに注意してください（/>）それぞれを閉じる input 鬼ごっこ。そうしないと、アプリが登録できなくなります blur イベントを正しく：

/var/www/html/digiaddress/index.php

                . . .
                <form ng-submit="processForm()" class="custom-form">
                            <div class="form-group input-group-sm">
                                <label for="state">State</label>
                                <input type="text" class="form-control rounded-0 textbox-border" id="state"
                                       placeholder="" ng-model="address.state"
                                       ng-blur="geocodeAddress(address,'state')" required=""/>
                            </div>
                            <div class="form-group input-group-sm">
                                <label for="zip" class="animated-label">Zip</label>
                                <input type="text" class="form-control rounded-0 textbox-depth textbox-border"
                                       id="zip" ng-model="address.zip" disabled="disabled"
                                       ng-blur="geocodeAddress(address,'zip')" required=""/>
                            </div>
                            <div class="form-group input-group-sm">
                                <label for="town">Town</label>
                                <input type="text" class="form-control rounded-0 textbox-border"
                                       id="town" ng-model="address.town" disabled="disabled"
                                       ng-blur="geocodeAddress(address,'town')" required=""/>
                            </div>
                            <div class="form-group input-group-sm">
                                <label for="street">Street</label>
                                <input type="text" class="form-control rounded-0 textbox-border" id="street"
                                       placeholder="" ng-model="address.street" disabled="disabled"
                                       ng-blur="geocodeAddress(address,'street')" required=""/>
                            </div>
                            <div class="form-group input-group-sm">
                                <label for="house">House</label>
                                <input type="text" class="form-control rounded-0 textbox-border" id="house"
                                       placeholder="" ng-model="address.house" disabled="disabled"
                                       ng-blur="geocodeAddress(address,'house')" required=""/>
                            </div>
. . .

これらの新しい行の最初の行— ng-blur="geocodeAddress(address,'state')" required=""/> —は、「ユーザーのフォーカスが「状態」フィールドから離れたら、 geocodeAddress 関数。” 他の新しい行も呼び出します geocodeAddress、ただし、ユーザーのフォーカスがそれぞれのフィールドから離れる場合。

と同じように processForm 関数、 geocodeAddress で宣言されています createDigitalAddressApp.js ファイルですが、それを定義するコードはまだそのファイルにありません。この関数を完了して、マーカーを配置し、これらの後にアプリケーションマップに長方形を描画します。 blur フォームに入力された情報を反映するイベントが発生します。また、アドレス情報を取得してマップコードに処理するコードを追加します。

保存して閉じます index.php ファイル（を押す CTRL+X, Y、それから ENTER）次に、createDigitalAddressApp.js ファイル：

nano /var/www/html/digiaddress/js/createDigitalAddressApp.js

このファイルで、次の行を見つけます。

/var/www/html/digiaddress/js/createDigitalAddressApp.js

. . .
$scope.geocodeAddress = function (address, field) {
. . .

この行は、私たちが宣言する場所です geocodeAddress 関数。この数行下で、次の名前の変数を宣言します fullAddress これは、ユーザーがアプリケーションのフォームフィールドに入力した情報から人間が読める形式のメールアドレスを作成します。これは一連の if ステートメント：

/var/www/html/digiaddress/js/createDigitalAddressApp.js

. . .
var fullAddress = "";

    if (address ['house']) {
        angular.element(document.getElementById('generate'))[0].disabled = false;
            fullAddress = address ['house'] + ",";
                }
    if (address ['town']) {
        angular.element(document.getElementById('street'))[0].disabled = false;
            fullAddress = fullAddress + address ['town'] + ",";
    }
    if (address ['street']) {
        angular.element(document.getElementById('house'))[0].disabled = false;
            fullAddress = fullAddress + address ['street'] + ",";
    }
    if (address ['state']) {
        angular.element(document.getElementById('zip'))[0].disabled = false;
            fullAddress = fullAddress + address ['state'] + " ";
    }
    if (address ['zip']) {
        angular.element(document.getElementById('town'))[0].disabled = false;
            fullAddress = fullAddress + address ['zip'];
    }
. . .

これらの行の直後に次のコメントがあります。

/var/www/html/digiaddress/js/createDigitalAddressApp.js

. . .
// add code for locating the address on Google maps
. . .

このコメントの下に、次の行を追加して、 fullAddress null以外の値です：

/var/www/html/digiaddress/js/createDigitalAddressApp.js

                . . .
                if (fullAddress !== "") {
                . . .

この行の下に次のコードを追加します。このコードは、フォームに入力された情報を geoimplement.php HTTPPOSTメソッドを使用したファイル fullAddress nullではありません：

/var/www/html/digiaddress/js/createDigitalAddressApp.js

                    . . .
                    $http({
                        method: 'POST',
                        url: 'geoimplement.php',
                        data: {address: fullAddress},
                        headers: {'Content-Type': 'application/x-www-form-urlencoded'}

                    }).then(function successCallback(results) {
                    . . .

次に、PHP呼び出しが正常に返されたかどうかを確認する次の行を追加します。

/var/www/html/digiaddress/js/createDigitalAddressApp.js

                        . . .
                        if (results.data !== "false") {
                        . . .

PHP呼び出しが正常に返された場合、結果を処理できるようになります。次の線を追加します。これにより、以前にマップに描画された可能性のある境界長方形が削除されます。 removeRectangle 関数は、上部に定義されています createDigitalAddressApp.js ファイル：

/var/www/html/digiaddress/js/createDigitalAddressApp.js

                            . . .
                            removeRectangle();
                            . . .

下 removeRectangle(); 行に、マップコントロールの新しい場所を指すマーカーを作成する次の4行を追加します。

/var/www/html/digiaddress/js/createDigitalAddressApp.js

                            . . .
                            new google.maps.Marker({
                                map: locationMap,
                                position: results.data.geometry.location
                            });
                            . . .

次に、次のコードを追加します。このコードは、結果から緯度と経度の情報を取得し、で作成した2つのHTMLラベルとともに表示します。 index.php 手順5のファイル：

/var/www/html/digiaddress/js/createDigitalAddressApp.js

                            . . .
                            lat = results.data.geometry.location.lat;
                            lng = results.data.geometry.location.lng;

                            $scope.address.lat = lat;
                            $scope.address.lng = lng;

                            geoCoordLabel = angular.element(document.querySelector('#geocoordinates'));
                            geoCoordLabel.html("Geo Coordinate: " + lat + "," + lng);

                            geoAddressLabel = angular.element(document.querySelector('#geoaddress'));
                            geoAddressLabel.html("Geo Address: " + fullAddress);

                            $scope.latlng = true;
                            . . .

最後に、これらの行の下に、次のコンテンツを追加します。このコードは、マップ上に新しい境界長方形をマークするビューポートを作成します。

/var/www/html/digiaddress/js/createDigitalAddressApp.js

                            . . .
                            if (results.data.geometry.viewport) {

                                rectangle = new google.maps.Rectangle({
                                    strokeColor: '#FF0000',
                                    strokeOpacity: 0.8,
                                    strokeWeight: 0.5,
                                    fillColor: '#FF0000',
                                    fillOpacity: 0.35,
                                    map: locationMap,
                                    bounds: {
                                        north: results.data.geometry.viewport.northeast.lat,
                                        south: results.data.geometry.viewport.southwest.lat,
                                        east: results.data.geometry.viewport.northeast.lng,
                                        west: results.data.geometry.viewport.southwest.lng
                                    }
                                });

                                var googleBounds = new google.maps.LatLngBounds(results.data.geometry.viewport.southwest, results.data.geometry.viewport.northeast);

                                locationMap.setCenter(new google.maps.LatLng(lat, lng));
                                locationMap.fitBounds(googleBounds);
                            }
                        } else {
                            errorLabel = angular.element(document.querySelector('#lt'));
                            errorLabel.html("Place not found.");
                            $scope.latlng = true;
                            removeRectangle();
                        }

                    }, function errorCallback(results) {
                       console.log(results);
                    });
                }
                . . .

このコンテンツを追加すると、ファイルのこのセクションは次のようになります。

/var/www/html/digiaddress/js/createDigitalAddressApp.js

                . . .
                // add code for locating the address on Google maps
                if (fullAddress !== "") {
                    $http({
                        method: 'POST',
                        url: 'geoimplement.php',
                        data: {address: fullAddress},
                        headers: {'Content-Type': 'application/x-www-form-urlencoded'}

                    }).then(function successCallback(results) {

                        if (results.data !== "false") {
                            removeRectangle();

                            new google.maps.Marker({
                                map: locationMap,
                                position: results.data.geometry.location
                            });

                            lat = results.data.geometry.location.lat;
                            lng = results.data.geometry.location.lng;

                            $scope.address.lat = lat;
                            $scope.address.lng = lng;

                            geoCoordLabel = angular.element(document.querySelector('#geocoordinates'));
                            geoCoordLabel.html("Geo Coordinate: " + lat + "," + lng);

                            geoAddressLabel = angular.element(document.querySelector('#geoaddress'));
                            geoAddressLabel.html("Geo Address: " + fullAddress);

                            $scope.latlng = true;

                            if (results.data.geometry.viewport) {

                                rectangle = new google.maps.Rectangle({
                                    strokeColor: '#FF0000',
                                    strokeOpacity: 0.8,
                                    strokeWeight: 0.5,
                                    fillColor: '#FF0000',
                                    fillOpacity: 0.35,
                                    map: locationMap,
                                    bounds: {
                                        north: results.data.geometry.viewport.northeast.lat,
                                        south: results.data.geometry.viewport.southwest.lat,
                                        east: results.data.geometry.viewport.northeast.lng,
                                        west: results.data.geometry.viewport.southwest.lng
                                    }
                                });

                                var googleBounds = new google.maps.LatLngBounds(results.data.geometry.viewport.southwest, results.data.geometry.viewport.northeast);

                                locationMap.setCenter(new google.maps.LatLng(lat, lng));
                                locationMap.fitBounds(googleBounds);
                            }
                        } else {
                            errorLabel = angular.element(document.querySelector('#lt'));
                            errorLabel.html("Place not found.");
                            $scope.latlng = true;
                            removeRectangle();
                        }

                    }, function errorCallback(results) {
                       console.log(results);
                    });
                }
                . . .

ファイルを保存しますが、今は開いたままにしておきます。ブラウザでアプリケーションに再度アクセスした場合、その外観や動作に新しい変更はありません。同様に、アドレスを入力して Generate ボタンをクリックしても、アプリケーションはマップコードを生成または表示しません。これは、マップコード機能が機能する前に、まだいくつかのファイルを編集する必要があるためです。引き続きこれらの変更を行い、これらのマップコードがどのように生成されるかを詳しく見ていきましょう。

ステップ7—マップコード生成を理解する

まだ見ながら createDigitalAddressApp.js ファイルで、前の手順で追加したコードのセクションをスクロールして、フォームから送信された情報を取得し、それを一意のマップコードに処理するコードを見つけます。ユーザーがGenerateボタンをクリックするたびに、 index.php ファイルはフォームを送信し、 processForm ここで定義されている関数 createDigitalAddressApp.js:

/var/www/html/digiaddress/js/createDigitalAddressApp.js

. . .
$scope.processForm = function () {
. . .

processForm 次に、HTTPPOSTを作成します generateDigitalAddress.php ファイル：

/var/www/html/digiaddress/js/createDigitalAddressApp.js

. . .
$http({
    method: 'POST',
    url: 'generateDigitalAddress.php',
    data: $scope.address,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).then(function (response) {
. . .

Stichting Mapcode Foundation は、無料のWebサービスとして物理アドレスからマップコードを生成するAPIを提供します。このMapcodeWebサービスの呼び出しがどのように機能するかを理解するには、閉じる createDigitalAddressApp.js を開きます generateDigitialAddress.php ファイル：

nano /var/www/html/digiaddress/generateDigitalAddress.php

ファイルの上部に、次のように表示されます。

/var/www/html/digiaddress/generateDigitalAddress.php

<?php
include("db.php");
. . .

行の読み取り include("db.php"); PHPに、からのすべてのテキスト、コード、およびマークアップをincludeするように指示します。 db.php 内のファイル generateDigitalAddress.php ファイル。 db.php 手順2で作成したMySQLデータベースのログインクレデンシャルを保持します。 generateDigitalAddress.php、フォームから送信された住所情報をデータベースに追加できます。

この下 include ステートメントは、によって送信されたリクエストに基づいて緯度と経度の情報を取得する数行です createDigitalAddressApp.js:

/var/www/html/digiaddress/generateDigitalAddress.php

. . .
$data = json_decode(file_get_contents("php://input"));
$lat = $data->lat;
$long = $data->lng;
. . .

次のコメントを探してください generateDigitalAddress.php ファイル。

/var/www/html/digiaddress/generateDigitalAddress.php

. . .
// call to mapcode web service
. . .

このコメントの下に次のコード行を追加します。このコードはMapcodeAPIを呼び出し、送信します lat と long パラメータとして。

/var/www/html/digiaddress/generateDigitalAddress.php

. . .
// call to mapcode web service
$digitaldata = file_get_contents("https://api.mapcode.com/mapcode/codes/".$lat.",".$long."?include=territory,alphabet&allowLog=true&client=web");
. . .

Webサービスは、に割り当てられたJSONデータを返します digitaldata、および次のステートメントはそのJSONをデコードします。

/var/www/html/digiaddress/generateDigitalAddress.php

. . .
$digitalAddress["status"] = json_decode($digitaldata, TRUE)['local']['territory']." ".json_decode($digitaldata, TRUE)['local']['mapcode'];
. . .

これにより、ユーザー指定の場所のマップコードが返されます。次の行は、この情報をデータベースに保存します。

/var/www/html/digiaddress/generateDigitalAddress.php

. . .
$obj = new databaseConnection();

$conn = $obj->dbConnect();

$obj->insertLocation($conn, $digitalAddress["status"],$data->state,$data->zip,$data->street,$data->town,$data->house,$lat,$long);
. . .

次に、最後の行はマップコードを呼び出し元の関数にエコーバックします。

/var/www/html/digiaddress/generateDigitalAddress.php

. . .
echo json_encode($digitalAddress);

このファイルを保存して閉じてから、再度開きます createDigitalAddressApp.js また：

nano /var/www/html/digiaddress/js/createDigitalAddressApp.js

マップコードが正常に取得されると、次の行が createDigitalAddressApp.js ファイルはそれをダイアログボックスでユーザーに表示します：

/var/www/html/digiaddress/js/createDigitalAddressApp.js

. . .
digiAddress = response.data.status;
. . .
$('#digitalAddressDialog').modal('show');
. . .

に新しいコード行を追加しましたが generateDigitalAddress.php、ブラウザでアプリにアクセスして操作しても、機能の変更は表示されません。これは、GoogleAPIキーをまだ追加していないためです。 geoimplement.php ファイル。GoogleMapsAPIを実際に呼び出します。

ステップ8— GoogleMapsAPIへの呼び出しを有効にする

このアプリケーションは、Google Maps APIに依存して、物理アドレスを適切な緯度と経度の座標に変換します。次に、これらはMapcode APIに渡され、MapcodeAPIはそれらを使用してマップコードを生成します。その結果、アプリケーションがGoogle Maps APIと通信して場所の緯度と経度を生成できない場合、マップコードを生成しようとしても失敗します。

ステップ6を思い出してください。ここで、 address データの場合、HTTPPOSTリクエストを介して結果を渡しました。 createDigitalAddressApp.js ファイル：

/var/www/html/digiaddress/js/createDigitalAddressApp.js

$http({
    method: 'POST',
    url: 'geoimplement.php',
    data: {address: fullAddress},
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).then(function successCallback(results) {

このコードブロックは、ユーザーが入力したアドレスデータを geoimplement.php GoogleMapsAPIを呼び出すコードを含むファイル。先に進み、このファイルを開きます。

nano /var/www/html/digiaddress/geoimplement.php

最初にデコードすることがわかります address POSTリクエストを通じて受信したもの：

/var/www/html/digiaddress/geoimplement.php

. . .
$data=json_decode(file_get_contents("php://input"));
. . .

その後、通過します address 入力データのフィールド geocode アドレスの地理情報を返す関数：

/var/www/html/digiaddress/geoimplement.php

. . .
$result = geocode($data->address);
. . .

その後、結果は発信者にエコーバックされます。

/var/www/html/digiaddress/geoimplement.php

. . .
echo json_encode($result);
. . .

The geocode 関数はをエンコードします address そして、それをアプリケーションキーとともにGoogleMapsAPIに渡します。

/var/www/html/digiaddress/geoimplement.php

. . .
// url encode the address
$address = urlencode($address);

// google map geocode api url
$url = "https://maps.googleapis.com/maps/api/geocode/json?address={$address}&key=<YOUR KEY>";
. . .

スクロールする前に、先に進み、APIキーを下の行に追加します。 // google map geocode api url コメント：

/var/www/html/digiaddress/geoimplement.php

. . .
// google map geocode api url
$url = "https://maps.googleapis.com/maps/api/geocode/json?address={$address}&key=ExampleAPIKeyH2vITfv1eIHbfka9ym634Esw7u";
. . .

Google Maps APIに呼び出しを送信した後、応答がデコードされ、その値が関数によって返されます。

/var/www/html/digiaddress/geoimplement.php

. . .
// get the json response
$resp_json = file_get_contents($url);

// decode the json
$resp = json_decode($resp_json, true);

if ($resp['status'] == 'OK') {
    return $resp['results'][0];
} else {
    return false;
}
. . .

このファイルを保存して、もう一度アプリケーションにアクセスしてください。入力 US-NY 状態フィールドでヒットします TAB 入力フォーカスを次のフィールドに変更します。次の出力が表示されます。

フォームに入力した地理座標と住所が地図の下に表示されていることに注意してください。これにより、アプリケーションははるかに魅力的でインタラクティブに感じられます。

注：地名の略語に関しては、MapcodeはISO3166標準を使用します。これは、一般的に使用される一部の略語を期待どおりに解釈できない可能性があることを意味します。たとえば、ルイジアナ州の住所のマップコードを生成する場合、次のように入力します。 LA、マップは（ルイジアナ州ではなく）カリフォルニア州ロサンゼルスにジャンプします。

米国の郵便略語の前に付けることで、それらとの混同を避けることができます US-. このルイジアナの例のコンテキストでは、次のように入力します US-LA.

Mapcodeがこの標準をどのように使用するかについて詳しくは、地域と標準コードのリファレンスページをご覧ください。

アプリケーションが地図上に場所を表示する方法がこのように改善されたにもかかわらず、アプリはまだ完全には機能していません。マップコードを生成する前に実行する必要がある最後のステップは、 db.php アプリケーションがデータベースにアクセスできるようにするファイル。

ステップ9—データベースクレデンシャルの追加とマップコード生成のテスト

このアプリケーションは、フォームに入力されたすべてのアドレスを、緯度、経度、およびマップコードとともに、手順2で作成したデータベースに保存することを思い出してください。これは、内のコードによって可能になります db.php ファイル。データベースのクレデンシャルを保存し、アプリケーションが locations その中のテーブル。

マップコード生成機能を有効にする最後のステップとして、 db.php 編集用ファイル：

nano /var/www/html/digiaddress/db.php

このファイルの先頭近くで、で始まる行を見つけます $pass. この行は、アプリケーションがデータベースにアクセスできるようにするために、MySQLログイン資格情報を送信します。交換 your_password root MySQLユーザーのパスワードを使用して：

/var/www/html/digiaddress/db.php

. . .
        $username = "root";
        $pass = "your_password";
. . .

これは、物理アドレスからマップコードを生成するために行う必要がある最後の変更です。ファイルを保存して閉じてから、ブラウザでアプリケーションをもう一度更新してください。選択したアドレスを入力し、生成ボタンをクリックします。出力は次のようになります。

この段階で、アプリケーションが完了し、世界中の物理的な場所の短いデジタルアドレスを生成できるようになりました。さまざまなアドレスを自由に試してみてください。入力するアドレスは、必ずしも米国内にある必要はないことに注意してください。

最後のタスクは、このアプリの2番目の機能を有効にすることです。それぞれのマップコードを使用してデータベースからアドレスを取得します。

ステップ10—物理アドレスを取得する

これで、特定の物理アドレスからマップコードを生成できるようになりました。最後のステップは、マップコードから派生した元の物理アドレスを取得することです。これを実現するために、次のようなPHPユーザーインターフェイスを開発します。

このUIのコードは、 findaddress.php ファイル。このファイル内で定義されたUIは、前の手順4で説明したUIとかなり似ているため、その動作の詳細についてはあまり詳しく説明しません。ただし、これら3つのファイルを調べて、それらがどのように機能するかを一般的に説明します。

アドレス取得機能を有効にするには、GoogleAPIキーをに追加する必要があります findaddress.php ファイルなので、お好みのエディタで開きます。

nano /var/www/html/digiaddress/findaddress.php

ファイルの下部近くで、で始まる行を見つけます <script async defer src=. 次のようになります。

/var/www/html/digiaddress/findaddress.php

<script async defer src="https://maps.googleapis.com/maps/api/js?key=<YOUR KEY>"></script>

交換 <YOUR KEY> 前の手順で行ったようにGoogleAPIキーを使用して、ファイルを保存します。ただし、閉じる前に、これらのファイルがどのように連携するかを簡単に見てみましょう。

ユーザーがフォームを送信すると、フォームがトリガーされます submit イベント、およびイベントリスナーはを呼び出します fetchadd 関数：

/var/www/html/digiaddress/findaddress.php

. . .
<form ng-submit="fetchadd()" class="custom-form">
. . .

The fetchadd 機能はデジタルアドレスをに送信します fetchaddress.php POSTリクエストの場合：

/var/www/html/digiaddress/js/findAddressApp.js

. . .
$http({
    method : 'POST',
    url : 'fetchaddress.php',
    data : {digiaddress: $scope.digiaddress}
}).then(function(response){
. . .

POSTが成功すると、関数はJSON応答を返します。次の行は、この応答を解析します。

/var/www/html/digiaddress/js/findAddressApp.js

. . .
var jsonlatlng = JSON.parse(response.data.latlng);
. . .

次の行は、マップ上にマーカーを設定します。

/var/www/html/digiaddress/js/findAddressApp.js

. . .
marker = new google.maps.Marker({
	position: new google.maps.LatLng(jsonlatlng.latitude, jsonlatlng.longitude),
        map: locationMap
});
. . .

そして、以下は地理座標と物理アドレスを出力します。

/var/www/html/digiaddress/js/findAddressApp.js

. . .
geoCoordLabel = angular.element(document.querySelector('#geocoordinates'));
geoCoordLabel.html("Geo Coordinate: "+ jsonlatlng.latitude +","+ jsonlatlng.longitude);

geoAddressLabel = angular.element(document.querySelector('#geoaddress'));
geoAddressLabel.html("Geo Address: " + jsonlatlng.house +","+ jsonlatlng.town +","+ jsonlatlng.street +","+ jsonlatlng.state + " " + jsonlatlng.zip );
. . .

次のリンクにアクセスして、ブラウザでこのアプリケーションにアクセスします。

http://your_server_ip/digiaddress/findaddress.php

以前に取得したマップコードを入力してテストします。次の図は、一般的な出力を示しています。

これで、アプリケーションは終了です。これで、世界中の任意の場所に固有のマップコードを作成し、そのマップコードを使用してその場所の物理アドレスを取得できます。

結論

このチュートリアルでは、Google Maps APIを使用して場所を固定し、その経度、緯度の情報を取得しました。この情報は、MapcodeAPIを使用して一意の短いデジタルアドレスを生成するために使用されます。マップコードには、緊急サービスから考古学的調査に至るまで、多くの実用的なユースケースがあります。 [Stichting Mapcode Foundation]（ http://www.mapcode.com/aboutus.html ）には、そのようなユースケースがいくつかリストされています。

謝辞

プロジェクトコード全体を開発してくれたDineshKarpeとSayliPatilに感謝します。

getdocs

13036