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

Question

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

解決済

回答 1

投稿 2016/07/27 14:30 ・編集 2016/08/02 13:14

評価
クリップ 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 ) {
// 具体的な処理は省略、この段階では使用するマーカーの情報と緯度経度を与えるだけでＯＫ
}

//---定数---

//年代ごとにマーカーを色分けする
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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します

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

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

評価を下げる理由を選択してください
プログラミングに関係のない質問やってほしいことだけを記載した丸投げの質問問題・課題が含まれていない質問意図的に内容が抹消された質問過去に投稿した質問と同じ内容の質問広告と受け取られるような投稿
詳細な説明はこちら

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

この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
  メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
  質問評価に関するヘルプページの閲覧

2 件の質問への追記・修正依頼

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

kei344

2016/08/02 11:19

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

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

キャンセル
famaki

2016/08/02 13:15

追加しました。

追加しました。

キャンセル

回答 1 件

評価が高い順
新着順
古い順

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

score 2 · Accepted Answer · 2016-07-27T21:24

ベストアンサー

+1

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

function plotMarkers (c_LatLng, MARKERS) {
}

Re: famaki さん

投稿 2016/07/27 21:24

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2016/07/30 09:22

早々に御回答を頂きながら反応が遅くなり申し訳ありません。
「XMLHttpRequest」「fetch」「JSON.parse」あらためて知識経験のなさを痛感しつつ…いまだ解決とは言える段階ではありませんが、とり急ぎ御回答へのお礼まで。

早々に御回答を頂きながら反応が遅くなり申し訳ありません。「XMLHttpRequest」「fetch」「JSON.parse」あらためて知識経験のなさを痛感しつつ…いまだ解決とは言える段階ではありませんが、とり急ぎ御回答へのお礼まで。

キャンセル
2016/08/02 10:52

従来<script type="text/javascript" src="markers.js"></script>としていたところで
仮にsrc="xhr.js"として、このxhr.jp の中に…

var xhr= new XMLHttpRequest();
xhr.open( "GET", "markers.js", true );
xhr.send(null);
var jsscode = JSON.parse();

とりあえず以上４行を書いてみましたが、５行目にalert()を書いても止まりません（３行目と４行目の間に書いたalert()では止まります）。
JSON.parse の応答待ちということでしょうか？
おそらく重大な間違い（欠落や違反）があるものと思います

また上記２行目で、ホルダを指定して、複数のデータファイル（marlers1.js, markers2.js, mark2015abcd.js などなど、いずれにも同じ構造で MARKERS=[]; が書かれている…）の中から１つを選択するにはどのように書けば宜しいのでしょうか？

ご教授をお願い致します。

従来<script type="text/javascript" src="markers.js"></script>としていたところで仮にsrc="xhr.js"として、このxhr.jp の中に… var xhr= new XMLHttpRequest(); xhr.open( "GET", "markers.js", true ); xhr.send(null); var jsscode = JSON.parse(); とりあえず以上４行を書いてみましたが、５行目にalert()を書いても止まりません（３行目と４行目の間に書いたalert()では止まります）。 JSON.parse の応答待ちということでしょうか？おそらく重大な間違い（欠落や違反）があるものと思いますまた上記２行目で、ホルダを指定して、複数のデータファイル（marlers1.js, markers2.js, mark2015abcd.js などなど、いずれにも同じ構造で MARKERS=[]; が書かれている…）の中から１つを選択するにはどのように書けば宜しいのでしょうか？ご教授をお願い致します。

キャンセル
2016/08/02 11:00

自己レスですが申し忘れたことがありました。
GETに対するサーバからの応答を処理すべきでしょうか…自分の環境でとにかく動くが最優先で、ブラウザごとの対応は「ハードルが高すぎ」これはWEBのサンプルコードなど引かせて頂くべきかの質問に代えます。
また４行目でワケも分からずjscodeにJSON.parseの応答を入れていますが、そもそもmarkers,jsを読み込んでいるのかどうかさえxhrのどのプロパティやらカット＆トライ…というのが現状です。

WEBに XMLHttpRequest JSON.parse で検索を掛けても答えは見つからず…

自己レスですが申し忘れたことがありました。 GETに対するサーバからの応答を処理すべきでしょうか…自分の環境でとにかく動くが最優先で、ブラウザごとの対応は「ハードルが高すぎ」これはWEBのサンプルコードなど引かせて頂くべきかの質問に代えます。また４行目でワケも分からずjscodeにJSON.parseの応答を入れていますが、そもそもmarkers,jsを読み込んでいるのかどうかさえxhrのどのプロパティやらカット＆トライ…というのが現状です。 WEBに XMLHttpRequest JSON.parse で検索を掛けても答えは見つからず…

キャンセル
2016/08/02 11:08

たびたびすみません、応答がないのは３行目でした！

たびたびすみません、応答がないのは３行目でした！

キャンセル
2016/08/02 11:46

ローカルファイルでテストしたいのですが、とりあえずテスト用のファイルを３つ自前のサーバに置いて読めるようにはなりましたが、
エラー（１／３）
VM292:1 Uncaught SyntaxError: Unexpected token u(anonymous function) @ xhr.js:25
エラー（２／３）
index.html:28 Uncaught ReferenceError: MARKERS is not definedonload @ index.html:28
エラー（３／３）
index.html:1 XMLHttpRequest cannot load http://www.（ここは省略します。WebARENAのスペースです）.jp/ttes_t/markers1.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

XMLHttpRequest cannot load http://www.k-2inc.jp/ttes_t/markers1.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

JSON.parseまでは、まだ道遠し…

ローカルファイルでテストしたいのですが、とりあえずテスト用のファイルを３つ自前のサーバに置いて読めるようにはなりましたが、エラー（１／３） VM292:1 Uncaught SyntaxError: Unexpected token u(anonymous function) @ xhr.js:25 エラー（２／３） index.html:28 Uncaught ReferenceError: MARKERS is not definedonload @ index.html:28 エラー（３／３） index.html:1 XMLHttpRequest cannot load http://www.（ここは省略します。WebARENAのスペースです）.jp/ttes_t/markers1.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. XMLHttpRequest cannot load http://www.k-2inc.jp/ttes_t/markers1.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. JSON.parseまでは、まだ道遠し…

キャンセル
2016/08/02 11:48

パラメータ忘れてますね…がっくし

パラメータ忘れてますね…がっくし

キャンセル
2016/08/02 11:54

配列MARKERS=[];を「JSON文字列」に書き換える必要があるのでしょうか？
すみません、散らかった内容の投稿の連発で…

配列MARKERS=[];を「JSON文字列」に書き換える必要があるのでしょうか？すみません、散らかった内容の投稿の連発で…

キャンセル
2016/08/02 11:59

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

ご質問にあるような`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/

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分調べてもわからないことは、質問しよう！

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

関連した質問

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

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

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

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

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

関連した質問

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

SNSアカウントでログイン

teratailアカウントでログイン