質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.36%

JavaScriptで読み込む配列をファイルを指定して切り替えたいのですが…

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 958

famaki

score 14

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している煩わしさを解消するのが目的です)。

お知恵を拝借したく。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/08/02 11:19

    タグに「Google Map」を追加されてはいかがでしょうか。

    キャンセル

  • famaki

    2016/08/02 13:15

    追加しました。

    キャンセル

回答 1

checkベストアンサー

+1

MARKERS を引数で渡せばお望みの動作を実現できると思います。
MARKERS を定義している marker.js が外部化されているのなら XMLHttpRequest もしくは fetch で内容をGETして JSON.parse してみてください。

function plotMarkers (c_LatLng, MARKERS) {
}

Re: famaki さん

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/02 11:59

    ご質問にあるような`MARKERS= ... `の形式はJSONではないのでparseできませんよ。
    JavaScriptとして読み込みたいのならばJSONPがいいかな?
    ご質問からやりたいことがイマイチわからないのでなんとも言えないですが
    私ならばJavaScriptを動的に読み込むのならAjaxではなくscriptタグを動的に生成する、という方法を優先します。

    キャンセル

  • 2016/08/02 12:23 編集

    XMLHttpRequestをローカルテストする場合はApache等のHTTPサーバをインストールして http://127.0.0.1/ でテストする必要があります。
    JSONを勧めたのは「marker.js には、各マーカーのデータが配列として記述されているとして」が marker1.js, marker2.js のようにファイルを切り替えて読み込むデータも切り替える意図があると読めなくもなかったからです。
    変数単位で切り替えるのなら marker1, marker2 のように複数の変数宣言したり、配列でまとめればいいのでJSONを使わなくても構いません。

    > var jsscode = JSON.parse();
    XMLHttpRequestは非同期処理なので同期処理と同じように連続してコードを書いても機能しません。
    onloadイベントを使えば解決すると思いますので XMLHttpRequest の使い方を基本から調べて見て下さい。
    http://uhyohyo.net/javascript/13_1.html
    http://www.html5rocks.com/ja/tutorials/file/xhr2/

    キャンセル

  • 2016/08/02 13:20

    ありがとうございます。勉強になりました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る