GoogleMap上にマーカーをプロットして「ある分布」を調べたいのですが、元データが年度や地域の違いなどで「複数組」あります。
</head> <script type="text/javascript" src="plot.js"></script> <script type="text/javascript" src="marker.js"></script> </head> <body onload="plotMarkers( latlng_MyTOWN )"> <div> <!-- ○○の分布です --> <div id="map_canvas" style="width:660; height:800px"></div> <!-- データを選んでください。 --> </div> </body>
上記plot.js には、所定のデータ構造で示されるマーカーの元データを「プロットする処理」と、元データを記述する際に使う「定数の定義」などを記述…これは共通とします。
//htmlを開いたときに呼び出され、配列データに従ってマーカーをプロットする function plotMarkers( c_LatLng ){ // : var myLatlng = c_LatLng; var myOptions = { zoom:16, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // for (var i = 1; i < MARKERS.length; i++) { var inf = markers[ i ]; var dat = []; dat[0] = checkLng(inf[2]); //例)データ構造の違いや dat[1] = checkLat(inf[1]); //制限範囲のチェック、等 dat[2] = getPNGinf(inf[0]); //アイコンの情報を取得… set2Map( map, dat[0], dat[1], dat[2] ); } } //東経lng,北緯latにマーカーmkをセットする function set2Map( map, lng, lat, mk ) { // 具体的な処理は省略、この段階では使用するマーカーの情報と緯度経度を与えるだけでOK } //---定数--- //年代ごとにマーカーを色分けする AGE-2 = 1; AGE3-5 = 2; AGE6-11 = 3; AGE12-14 = 4; AGE15-17 = 5; //同居家族がいたらマーカーをずらす FAMLNG = 0.000000012;
冒頭のhtmlでmarker.jsを読み込んでいる箇所(ファイル名やホルダ名)をいちいち書き換えることなく(いっそmaeker.jsについては記述しないで済ませることも含めて)複数ある元データの中のひとつを選び、そのマーカーをプロットさせる方法を検討中です。
marker.js には、各マーカーのデータが配列として記述されているとして、すべてのファイルで配列名は同じにするのは構いません(むしろファイルを選んでから、さらに配列を指定するのは合理的とは思われません)。
MARKERS = [ [AGE3-5, 39.12300121,141.12300552], [AGE3-5, 39.12300121,141.12300552+FAMLNG*1], [AGE12-14, 40.45600333,140.45600664], [AGE6-11, 40.45605033,140.45611164], // : ]; //別のファイルにも… MARKERS = [ [AGE12-14, 40.45600333,140.45600664], [AGE3-5, 40.12300001,141.12300002], [AGE6-11, 41.45600003,141.45600004], [AGE3-5, 39.12300121,141.12300552], // : ];
冒頭htmlで地図の下に「データを選んでください」と書きましたが、ここでファイルを読み込むようにすればbody onloadのタイミングではなくinput後の呼び出し…でも、要はデータを切り替えられれば問題はありません(元データをどれにするか決めて、いちいち marker.js にrenameしている煩わしさを解消するのが目的です)。
お知恵を拝借したく。
回答1件
あなたの回答
tips
プレビュー