人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

GoogleMapsで一画面に表示するマーカーの数をある一定数で制限したいと思っているのですが、うまいやり方を、あるいはやり方を紹介したサイトを教えてください。
表示するデータはXMLから取得したいと思っています。
単純にマーカーの件数だけではなく、画面に表示されている範囲内の件数、っていうのを判定できればよいと思ってはいるのですが。よろしくお願いします。

●質問者: sho7767
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:XML うまい サイト データ
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● hwtnv
●35ポイント

http://as-is.net/blog/archives/001032.html

こちらでご紹介されている

『kml2gmaps.html: Maps KML file onto Google Maps』内では

var len = Math.min(markers.length, 20);

という書式で(最新の)20件に表示が制限されています。

自分が運営しているサイト

http://mapping.jp/map/sakura_gmap.html

でもこれを利用させていただいていますが、こちらでは

var len = Math.min(markers.length, 200);

として、最新200件に制限しています。

画面に同時に表示される件数、という書式知りたいですね?、

(参考までに)kml2.1のほうには用意されています。

http://earth.google.com/kml/kml_21tutorial.html#workingregions

◎質問者からの返答

ありがとうございます。

単純に読み込む件数はすぐできますが、やはり画面に表示される件数を制限したいところです。


2 ● はむ!
●35ポイント

以下のような方法ではいかがでしょう。

(1)KMLから読み込んだ情報を一旦配列に保存します。

(2)addListener('moveend') でリスナー関数を定義し、その中で上記配列から現在の表示範囲に含まれているものだけを取り出し、マーカーに設定します。既に表示されているものはそのままにします。


以下、非常にアバウトですみませんが考え方を示すコードです。

(そのまま動くというものではありません。ミス等ありましたらすみません。)


// MyPointクラス
// posはGLatLng(V2)またはGPoint(V1)を想定
// markerはGMarkerを想定
function MyPoint(pos, text) {
 this.pos = pos;
 this.text = text;
 this.marker = null;
}
// 表示ポイント候補の配列
var points = new Array();
// KMLで読み込んだ位置情報を配列に読み込む
for ( .... ) {
 var pos = ....
 var text = ....
 points[points.length] = new MyPoint(pos,text); // 配列にポイント1個追加
}
var display_num_limit = 100; // 画面に表示される数の制限
var current_display_num = 0; // 画面に表示されている数
GEvent.addListener(map, 'moveend', function() {
 for( var i=0 ; i<points.length ; i++ ) {
 var point = points[i];
 if ( map.GetBounds().contains( point.pos ) ) {
 // マップの表示範囲に含まれている場合
 if ( !point.marker && current_display_num < display_num_limit ) {
 // 既に表示されていなければマーカー作成
 point.marker = (point.pos、point.text を使ってマーカーを作成する関数);
 current_display_num ++;
 }
 }
 else {
 // マップの表示範囲に含まれていない場合
 if ( point.marker ) {
 // 既に表示されていればマーカー削除
 (point.markerを削除する関数)
 current_display_num--;
 }
 }
 }
});
◎質問者からの返答

すばらしいです。ご丁寧にコードまでありがとうございます!

そうですね、まずはこういう実装ができれば満足できそうな感じです。

参考させていただき試してみたいと思います。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ