マップオブジェクトの状態変化イベント及びマウスイベントを試す。デモのサンプル地図／Map Events Demo

スポンサードリンク

マップオブジェクトの状態変化イベント及びマウスイベントを試す。デモのサンプル地図／Map Events Demo

Posted by 管理人 on 2011年1月10日 Leave a comment (0) Go to comments

データベースから地図の中心より半径（km）を指定した距離範囲のマーカー（アイコン）を表示するphp+MySQL(その2)

（その1）php+MySQL サンプルStore Locatorを試してみる。
（その2）マップオブジェクトの状態変化イベント及びマウスイベントを試す。デモのサンプル地図／Map Events Demo
（その3）addListener() イベントハンドラで地図（マップ）イベントによりデータベースから都度マーカーを読み込むphp+MySQL
（その4）データベースから地図の中心より半径（km）を指定した距離範囲のマーカー（アイコン）を表示するサンプルデモ完成

◆ Google Maps API v3 / マップオブジェクトの状態変化イベント及びマウスイベントを試す。デモのサンプル地図

マーカーが多く増えてきたので、Ｇｏｏｇｌｅ先生のViewport Marker Management（地図に表示されている範囲のマーカーだけを表示させる）なるものに挑戦しようと他webで紹介されていたAjax案を試していて気がついた。地図が広域になれば、マーカーが増えすぎて、クラスタリング処理でもしないと重くなるのね・・・・・はぁっ当然ですな。

MarkerClusererと組み合わせることを考えたが、このクラスタリング方法も広域にすると個々のアイコンが見えなくなってしまう。

希望のサイト製作には不向きだなと考えていたら、地図の中心から半径(km)の距離範囲のマーカーをデータベースから取り出すSQLがありました。

これを使っていきます。

先ずは、データベースとの通信用phpファイルの準備ですが、詳しくはStore Locator （店舗検索）のページを参照してください。

ともあれ、まずは地図の中心がわかり易いように、地図の中心にマーカーを表示させます。

そして、次のような動きにしたいと思います。

1.地図の中心から半径ｎ km内のマーカーを表示する。

2.初期座標は指定する。（あとでiPhone（アイフォン）用にGPSの現在位置と置き換えます。）

3.地図を動かしたら、地図の中心がずれるので、再度マーカーをデータベースから読み込みなおします。

地図が動いたらマーカーをデータベースから読み込む。

これがキモになるのですが、地図に何らかの状態変化イベントが発生したら、地図の中心から入力したkmの範囲のマーカー（アイコン）を再表示させる方法を検討します。

しかし、うまくいかない。どのイベントを使ったらいいのか？

各種イベントについては、日本語リファレンスでは、抜けがあるので英語版でチェック

Google Maps Javascript API V3 Reference Events

ありゃま。たくさんあるのですね。

しかし、リファレンスを読んでも、違いやイベント発生のタイミングが良くわからん。それなら・・・・・・適当に試してしまえ。試したeventsは次の通り。

//Google Maps Javascript API V3 Events（UI events＆MVC State Changes etc.)

google.maps.event.addListener(map,”click”,function(){mapevents(“click”);});
//◆地図をクリックした時

google.maps.event.addListener(map,”dblclick”,function(){mapevents(“dblclick”);});

//◆地図をダブルクリックした時

google.maps.event.addListener(map,”mouseover”,function(){mapevents(“mouseover”);});

//◆地図にマウスカーソルが重なった時

google.maps.event.addListener(map,”mouseout”,function(){mapevents(“mouseout”);});

//◆地図からマウスカーソルが抜けた時

google.maps.event.addListener(map,”idle”, function(){mapevents(“idle”);});

//◆地図範囲の移動後、又はズーム後の待機状態になった時

google.maps.event.addListener(map,”zoom_changed”, function(){mapevents(“zoom_changed”);});

//◆ズームレベルを変更した時

google.maps.event.addListener(map,”center_changed”,function(){mapevents(“center_changed”);});

//◆地図の中心座標が移動した時

google.maps.event.addListener(map,”bounds_changed”,function(){mapevents(“tilesloaded”);});

//◆地図のタイルの読み込みが完了した時点

google.maps.event.addListener(map,”maptypeid_changed”,function(){mapevents(“maptypeid_changed”);});

//◆地図の種類が変更された時

google.maps.event.addListener(map,”bounds_changed”,function(){mapevents(“bounds_changed”);});

//◆地図の表示範囲を変更した時

google.maps.event.addListener(map,”dragend”,function(){mapevents(“dragend”);});

//◆地図の移動（ドラッグ）をやめた時

google.maps.event.addListener(map,”dragstart”,function(){mapevents(“dragstart”);});

//◆地図の移動（ドラッグ）を開始した時

google.maps.event.addListener(map,”drag”,function(){mapevents(“drag”);});

//◆地図の移動（ドラッグ）中に継続発生

google.maps.event.addListener(map,”projection_changed”,function(){mapevents(“projection_changed”);});

//◆地図の投影が変更された時点

google.maps.event.addListener(map,”mousemove”,function(){mapevents(“mousemove”);});

//◆地図からマウスカーソルが抜けた時

google.maps.event.addListener(map,”rightclick”,function(){mapevents(“rightclick”);});

//◆地図を右クリックした時

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

Google Maps API v3 目次に戻る

WordPressにGoogle Maps API V3！

素人のホームページ作成メモ