◆ Google Maps API v3 /ズームレベルに連動しマーカー収得用の半径指定(km)を自動変更させる。
以前に、データベースから地図の中心より半径(km)を指定した距離範囲のマーカー(アイコン)を表示するサンプルデモを作成してみた。
これらは、ズームレベルの変更(zoom_changedイベント)があってもデータベースからは、マーカーを読み込ませないものにした、iPhone(アイフォン)やスマートフォン用の地図の場合、何度もMySQLと通信させるのは、スムースでないためだ。
しかしながら、PC用地図の場合、地図に表示されている範囲に合わせて、マーカーを表示させるようにした方が使用感が良いことに気がついた(・・・というかいちいち半径なんか指定するのは面倒)。
それであれば・・・・是非にもチャレンジしたかったのがgoogle先生のViewport Marker Mnagement、これは地図に表示されている範囲のマーカーだけを表示すテクニック、getBoundsで地図境界を取り出してデータベースから境界無いのマーカだけをひっぱってくるのだが、ここで地図レベル広域にしたら全部の数千個のマーカーが表示されてしまうではないか・・・・・・というかブラウザが固まるな。
では、広域になったらマーカーを表示させないか、またはMarkerclustererを使ったクラスタリング処理に切り替えるか・・・・・。
今回は、そこまで試す時間的余裕もないので、それなら、ズームレベルに併せて半径距離を自動で変更させてみることにしてみよう。
元にする地図のソースは、google先生のstoreLocater(詳しくはコチラ)
(1)ズームレベルを読み出して、半径距離を指定する方法の検討
地図からズームレベルを読み出して、ぞのズームレベルに対して、半径距離を指定する方法を先ずは試してみる。表示させる地図は、出来るだけ正方形がいいですな。
ズームレベルが15の場合、データベースから読み込む半径を例えば5kmとかに指定したい。
ズームレベルを得る方法は、getZoom(詳しくはコチラ)、これで得た変数zoomをif文とかで切り替えればいいかと。考えたif文のscriptは、次のようなもの。zoomレベルによって半径を指定する変数viewを得て、viewをvar radiusに渡してやる。 zoomは13の場合、マーカーを表示させる半径距離を5.5kmにする。 switch文の方がいいか?
var zoom = map.getZoom(); zoomlevel.innerHTML = '現在のズームレベルは、「 ' + zoom + ' 」です。'; if (zoom >= 1 && zoom <= 8) {var view = '0';} else if(zoom ==9){var view = '85';} else if(zoom ==10){var view = '43';} else if(zoom ==11){var view = '21.6';} else if(zoom ==12){var view = '12.3';} else if(zoom ==13){var view = '5.5';} else if(zoom ==14){var view = '2.8';} else if(zoom ==15){var view = '1.3';} else if(zoom ==16){var view = '0.65';} else if(zoom ==17){var view = '0.34';} else if(zoom ==18){var view = '0.16';} else if(zoom ==19){var view = '0.09';} else if(zoom ==20){var view = '0.05';} else {var view = '0';} var radius = view;
(2)マップイベントの処理
上記if文が動作するように、地図にズームレベルに変更があった時のイベントハンドラを追加。
google.maps.event.addListener(map, 'zoom_changed', function() //◆地図のズームレベル変更時 { center = map.getCenter(); searchLocationsNear(center); });
◆ Google Maps API v3 ズームレベルに連動しマーカー収得用の半径距離(km)を自動変更するサンプルデモ
出来上がったマップは次のとおり、気になるのは、地図表示範囲内に収まるように各ズームレベルにあった半径にしておかないと、サイドバーに地図に表示されていないマーカーリストが表示されてしまいます。 なお、ズームレベルが広域になると読み込みが遅くなるので、ズームレベル1~8の場合、マーカーを読み込まないように半径を0kmにしてみました。 <問題点> iPhone(アイフォン)用には、ズームの度にマーカーを読み込ませるのは、ちと辛いかと。
- ズームレベルに合わせてマーカー読み出し+マーカー配列の再使用(高速化)+現在地からのルート検索&距離取得・・・・・PCで見る場合は、Google Chromeで見てください。
◆Google Maps JavaScript API V3
関連記事一覧
スポンサードリンク
Leave a Comment