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

前書き

通常、郵便住所は長く、覚えにくい場合があります。 短いアドレスが望ましいいくつかのシナリオがあります。 たとえば、2、3人のキャラクターのみで構成される短い住所を送信できるようにすると、救急車サービスをより迅速に配信できます。 Pieter GeelenとHarold Goddijnは、世界中の物理的な住所の短い形式の住所を簡単に作成できるように、2001年にhttp://www.mapcode.com/[Mapcode system]を開発しました。

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

前提条件

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

  • Ubuntu 18.04サーバーへのアクセス。 このサーバーには、 `+ sudo +`権限を持つ非* root *ユーザーとファイアウォールが設定されている必要があります。 これを設定するには、https://www.digitalocean.com/community/tutorials/initial-server-setup-with-ubuntu-18-04 [Ubuntu 18.04の初期サーバーセットアップガイド]に従ってください。

  • マシンにインストールされたLAMPスタック。 このチュートリアルで開発するアプリケーションはAngularJSとPHPを使用し、アプリケーションが生成するデジタルアドレスはMySQLデータベースに保存されるため、これが必要です。 Linux、Apache、MySQLのインストール方法、Ubuntu 18.04上のPHP(LAMP)スタックを設定します。

  • サーバーにインストールされたGit。 チュートリアルhttps://www.digitalocean.com/community/tutorials/contributing-to-open-source-getting-started-with-git [オープンソースへの貢献:Git入門]をインストールしてセットアップできます。ギット。

ステップ1-Google APIキーの取得

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

独自のAPIキーを取得するには、Googleのhttps://developers.google.com/maps/documentation/javascript/get-api-key[「APIキーの取得」ページ]にアクセスしてください。 ステップ1の* GET STARTED *ボタンをクリックすると、次の画像に示すようにポップアップが開きます。

image:https://assets.digitalocean.com/articles/mapcode/googlemapsapi1.png [image]

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

image:https://assets.digitalocean.com/articles/mapcode/googlemapsapi2.png [image]

これに続いて、支払い情報の入力を求められます。 Googleは無料の試用版の一部としてAPIキーを提供していますが、それらを取得するには請求を設定して有効にする必要があります。

image:https://assets.digitalocean.com/articles/mapcode/googlemapsapi3.png [image]

この情報を入力すると、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 of」テーブルを作成します。

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`)
);

このテーブルには、「+ digitaladdress 」、「 state 」、「 zip 」、「 street 」、「 town 」、「 house」、「+ latitude」、「+ longitude」の8つの列があります。 最初の列「+ digitaladdress 」は、「 KEY」コマンドを使用したindexです。 MySQLのインデックスは、エンサイクロペディアまたは他の参照作業での動作と同様に機能します。 ユーザーまたはアプリケーションが `+ WHERE +`ステートメントを含むクエリを発行するたびに、MySQLは各列のすべてのエントリを行ごとに読み取ります。 このように列にインデックスを付けると、列からデータが取得され、アルファベット順に別の場所に保存されます。つまり、MySQLはテーブル内のすべての行を調べる必要がなくなります。 インデックスで探しているデータを見つけて、テーブルの対応する行にジャンプするだけです。

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

exit

データベースとテーブルをセットアップし、Google Maps APIキーを用意したら、プロジェクト自体を作成する準備が整いました。

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

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

完全なプロジェクトのスケルトンコードは、https://github.com/do-community/digiaddress [この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ファイルが含まれています。 ディレクトリ構造を表示するには、最初に + apt`を使用して + trees`パッケージをインストールします。

sudo apt install tree

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

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

  • + geo implement.php

  • + Generate Digital Address.php

  • + db.php

  • + create Digital Address App.js

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

残りの3つのファイルは、アプリケーションの2番目の機能を有効にします。つまり、特定のマップコードから物理アドレスを取得します。

  • + find address.php

  • + fetch address.php

  • + find Address App.js

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

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

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

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="></script>
. . .

「++」をステップ1で取得したGoogle APIキーに置き換えます。 APIキーを追加すると、行は次のようになります。

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

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

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

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

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

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

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

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






. . .

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

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

               . . .


























                . . .

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

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

                           . . .






                           . . .

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

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

                           . . .






       . . .

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

/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:///digiaddress

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

image:https://assets.digitalocean.com/articles/mapcode/final_form.png [image]

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

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

マップがGoogle Maps JavaScript APIを介してWebサイトに表示される場合、ビジターが表示するマップと対話できるユーザーインターフェイス機能が含まれています。 これらの機能は_controls_として知られています。 `+ 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 -->








. . .

ファイルを保存し、ブラウザでアプリケーションに再度アクセスします。 以下が表示されます。

image:https://assets.digitalocean.com/articles/mapcode/final_googlemap.png [image]

ご覧のとおり、アプリケーションにマップが正常に追加されました。 マップをドラッグしてさまざまな場所にフォーカスしたり、ズームインやズームアウトしたり、マップ、航空写真、ストリートビューを切り替えたりできます。 追加したコードを振り返ると、フォームに入力された地理座標と物理アドレスを表示する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-イベントリスナーの追加

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

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

  • HTMLボタンをクリックする

  • 入力フィールドの内容を変更する

  • あるページ要素から別の要素にフォーカスを変更する

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

ng-=

この手順では、ユーザーがフォームを送信するたびにマップコードに入力された情報を処理するのに役立つイベントリスナーを追加します。 また、アプリケーションをよりインタラクティブにするイベントリスナーをさらに追加します。 具体的には、これらのリスナーを使用して、アプリケーションマップに表示される場所を変更し、マーカーを配置し、ユーザーがフォームに情報を入力するときにその場所の周囲に四角形を描画します。 これらのイベントリスナーを `+ 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 >
                           <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 +`イベントリスナーを追加して、このブロックの編集を続けます。 特定のページ要素がフォーカスを失うと、「+ blur +」イベントが発生します。 次の強調表示された行を `+ form`ブロックの + input`タグに追加します。 これらの行は、ユーザーがステップ4で作成したそれぞれのフォームフィールドからフォーカスを移動したときに、 + geocodeAddress +`関数を呼び出すようにアプリケーションに指示します。 各 `+ 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"

                           </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>
. . .

これらの新しい行の最初の-+ ng-blur =" geocodeAddress(address、 'state') "required =" "/> +-は、「ユーザーのフォーカスが 'state’フィールドから離れると、ユーザーのフォーカスがそれぞれのフィールドから離れると、他の新しい行も `+ geocodeAddress +`を呼び出します。

`+ processForm `関数と同様に、 ` geocode Address `は ` create DigitalAddressApp.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

               . . .

               . . .

この行の下に次のコードを追加します。 このコードは、 `+ fullAddress `がnullでない場合、https://en.wikipedia.org/wiki/POST_(HTTP)[HTTP _POST_ method]を使用して、フォームに入力された情報を ` geoimplement.php +`ファイルに送信します。

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

                   . . .







                   . . .

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

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

                       . . .

                       . . .

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

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

                           . . .

                           . . .

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

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

                           . . .




                           . . .

次に、結果から緯度と経度の情報を取得し、ステップ5で `+ index.php +`ファイルに作成した2つのHTMLラベルとともに表示する次のコードを追加します。

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

                           . . .













                           . . .

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

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

                           . . .

































               . . .

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

/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);
                   });
               }
               . . .

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

ステップ7-マップコード生成の理解

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

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

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

次に、 `+ processForm `は ` generateDigitalAddress.php +`ファイルに対してHTTP POSTを作成します。

/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を提供します。 このMapcode Webサービスの呼び出しがどのように機能するかを理解するには、 + createDigitalAddressApp.js`を閉じて + generate DigitialAddress.php`ファイルを開きます。

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

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

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

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

`+ include(" db.php "); `という行は、PHPに ` generateDigitalAddress.php `ファイル内の ` db.php `ファイルからのすべてのテキスト、コード、マークアップを_include_するように指示します。 ` 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
. . .

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

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

. . .
// call to mapcode web service

. . .

Webサービスは `+ digitaldata +`に割り当てられたJSONデータを返し、次のステートメントはその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 」に追加しましたが、ブラウザでアプリにアクセスして操作しても機能的な変更は表示されません。 これは、Google APIキーを実際に呼び出す「 geoimplement.php +」ファイルにまだGoogle APIキーを追加していないためです。

ステップ8-Google Maps APIの呼び出しを有効にする

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

`+ address `データを作成した後、 ` createDigitalAddressApp.js +`ファイルでHTTP POSTリクエストを介して結果を渡したステップ6を思い出してください。

/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) {

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

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

POSTリクエストで受信した `+ address +`を最初にデコードすることがわかります。

/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);
. . .

`+ geocode `関数は ` address +`をエンコードし、アプリケーションキーとともにGoogle Maps APIに渡します:

/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=";
. . .

スクロールする前に、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=";
. . .

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 +」を押して入力フォーカスを次のフィールドに変更します。 次の出力が表示されます。

image:https://assets.digitalocean.com/articles/mapcode/final_finalmap.png [image]

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

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

手順9-データベース資格情報の追加とマップコード生成のテスト

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

マップコード生成機能を有効にする最後のステップとして、編集のために `+ db.php +`ファイルを開きます:

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

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

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

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

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

image:https://assets.digitalocean.com/articles/mapcode/final_digitaladdress.png [image]

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

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

ステップ10-物理アドレスの取得

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

image:https://assets.digitalocean.com/articles/mapcode/final_getaddress.png [image]

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

アドレス取得機能を有効にするには、Google APIキーを `+ 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="></script>

前の手順で行ったように、「++」をGoogle APIキーに置き換えてから、ファイルを保存します。 ただし、閉じる前に、これらのファイルがどのように連携するかを簡単に見てみましょう。

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

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

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

`+ fetchadd `関数は、POSTリクエストでデジタルアドレスを ` fetchaddress.php +`に送信します。

/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:///digiaddress/findaddress.php

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

image:https://assets.digitalocean.com/articles/mapcode/final_fetchedaddress.png [image]

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

結論

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

謝辞

プロジェクトコード全体を開発してくれたhttps://www.linkedin.com/in/dineshkarpe[Dinesh Karpe]とhttps://www.linkedin.com/in/ptsayli[Sayli Patil]に感謝します。

Related