データベースから地図の中心より半径(km)を指定した距離範囲のマーカー(アイコン)を表示するphp+MySQL(その2)
- (その1)php+MySQL サンプルStore Locatorを試してみる。
- (その2)マップオブジェクトの状態変化イベント及びマウスイベントを試す。デモのサンプル地図/Map Events Demo
- (その3)addListener() イベント ハンドラで地図(マップ)イベントによりデータベースから都度マーカーを読み込むphp+MySQL
- (その4)データベースから地図の中心より半径(km)を指定した距離範囲のマーカー(アイコン)を表示するサンプルデモ完成
◆ Google Maps API v3 / マップオブジェクトの状態変化イベント及びマウスイベントを試す。デモのサンプル地図
マーカーが多く増えてきたので、Google先生のViewport Marker Management(地図に表示されている範囲のマーカーだけを表示させる)なるものに挑戦しようと他webで紹介されていたAjax案を試していて気がついた。地図が広域になれば、マーカーが増えすぎて、クラスタリング処理でもしないと重くなるのね・・・・・はぁっ当然ですな。
MarkerClusererと組み合わせることを考えたが、このクラスタリング方法も広域にすると個々のアイコンが見えなくなってしまう。
希望のサイト製作には不向きだなと考えていたら、地図の中心から半径(km)の距離範囲のマーカーをデータベースから取り出すSQLがありました。
これを使っていきます。
先ずは、データベースとの通信用phpファイルの準備ですが、詳しくはStore Locator (店舗検索)のページを参照してください。
ともあれ、まずは地図の中心がわかり易いように、地図の中心にマーカーを表示させます。
そして、次のような動きにしたいと思います。
1.地図の中心から半径n km内のマーカーを表示する。
2.初期座標は指定する。(あとでiPhone(アイフォン)用にGPSの現在位置と置き換えます。)
3.地図を動かしたら、地図の中心がずれるので、再度マーカーをデータベースから読み込みなおします。
地図が動いたらマーカーをデータベースから読み込む。
これがキモになるのですが、地図に何らかの状態変化イベントが発生したら、地図の中心から入力したkmの範囲のマーカー(アイコン)を再表示させる方法を検討します。
しかし、うまくいかない。どのイベントを使ったらいいのか?
各種イベントについては、日本語リファレンスでは、抜けがあるので英語版でチェック
ありゃま。たくさんあるのですね。
しかし、リファレンスを読んでも、違いやイベント発生のタイミングが良くわからん。それなら・・・・・・適当に試してしまえ。試したeventsは次の通り。
//◆地図をクリックした時
UI Events、MVC State Changes・・・良くわからんが、地図が動いたり、マウスを動かすと地図に何らかのイベントが発生するらしい。
ぜーんぶのイベントをぶち込んでデモを走らせると。
mousemoveは、えらいこっちゃなので先ず削除。
つづいて、マウスイベント。地図のドラッグイベント、・・・確認していくと使えそうなイベントが。しかしながら、あまりにもイベント発生が多いと、都度マーカーをデータベースから読み込むのですから、固まるかも・・・・・。イベントの発生が少なくて、地図を動かすたびにイベントが発生するような都合のいいものは?
結局、どれもイベント発生が頻繁なので、使えそうなものは、次の通りか?。
- (map,”idle”, function(){mapevents(“idle”);}); //◆地図範囲の移動後、又はズーム後の待機状態になった時
- (map,”zoom_changed”, function(){mapevents(“zoom_changed”);}); //◆ズームレベルを変更した時
- r(map,”dragend”,function(){mapevents(“dragend”);});//◆地図の移動(ドラッグ)をやめた時
◆ Google Maps API v3 php+MySQL Store Locator 完成サンプル
先ず、全部のイベントをぶち込んでみたサンプル
- マップイベント(全て)のデモのサンプル地図(mousemoveは除く)
つづいて
なお、tilesloaded と bounds_changed と center_changedのイベント発生の違いを比較するならコチラ。
◆Google Maps JavaScript API V3
関連記事一覧
スポンサードリンク
Leave a Comment