イントロダクション
前回は、PDOを使用してMySQL(DB)に画面(GoogleMapsAPIの機能を削除したので見れなくなりました。)から入力したデータを登録しました。
今回は、登録したデータを画面に表示する処理を実装しようと思います。
つまり、GoogleMapに表示するデータをDBに登録しておいて、それをGoogleMapに表示する方法について記載しました。
PHP + AjaxでGoogleMapの表示
GoogleMapに表示するデータをDBに登録しておいて、それをGoogleMapに表示する方法について記載しました。
GoogleMapを表示するのにJavaScriptを使用しています。GoogleMapsAPIを使用するのでGooglePlatformに登録してやる必要があります。
GoogleCroudの利用が必須となります。ほぼ無料で使用できるのでだいじょうぶなのですが、複数のAPIを使用したときにどのような形になるか?がわからないので筆者はGoogleMapsAPIの利用を止めることにしました。近くに再開する予定です。
処理イメージ
画面
- 1.GoogleMapで地図表示
- 2.画面の入力領域からのリクエスト送信
サーバー
- 1.XMLHttpRquest(Ajax)でのリクエストを受信
- 2.入力値を取得(ファイル含む)
- 3.DB(MySQL)に登録
- 4-1.地図をリロードする
- 4-2.追加した地図情報を地図に追加
- 参考サイト(MySQLでのBLOB操作)
こんなイメージです。サーバー側の処理としては登録した地図情報を全部リロード(再描画)する方法と追加した情報のみを描画する方法の2種類ありますが、起動してみた結果で判断するか。。。
ちょっと悩みどころです。
地図をリロードする方法
これは、単純に地図データをリフレッシュするので綺麗に再描画されます。その代わりデータが増えると重くなるかもしれないです。
<対策>
逆に初期表示をちゃんとメモリも考慮した形で実装すれば問題ありません、
追加した情報のみ再描画する方法
これは、更新する部分が少なくパフォーマンスも良いのですが、表示済みの地図情報間でのリンクなど関連する情報があるときに問題が発生します。
対策
表示する地図データに関してそれぞれを独立させつつも、連携取るための仕組みをきちんと考える。
関連ページ
- PHP PDO 〜MySQLにアクセスする〜
- PHP Ajax 〜DBに登録したデータを受信する〜
- Google Maps API PHP連携 〜マップ情報をDBに登録する〜
- PHP Image File 〜iPhoneやAndroidでの画像送受信の問題〜
- AngularJS Routing 〜PHPをWeb APIにする〜
- WordPress PHPカスタム〜根本的に見た目を変える〜
- WordPress PHPカスタム〜根本的に見た目を変える2〜
- Eclipse PHPプラグイン 〜ElipseでWordPress環境を構築〜
- WordPress テスト実装 〜heade-test.phpを表示〜
- AngularJS + PHP 〜WordPressと連携する〜
- AngularJS + PHP 〜AngularJSの実装〜
- AngularJS + PHP 〜AngularJSの実装2〜
- WordPress 処理解析 ~index.phpを眺める~