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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1388閲覧

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

famaki

総合スコア14

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/07/27 05:30

編集2016/08/02 04: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している煩わしさを解消するのが目的です)。

お知恵を拝借したく。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/08/02 02:19

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

2016/08/02 04:15

追加しました。
guest

回答1

0

ベストアンサー

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

JavaScript

1function plotMarkers (c_LatLng, MARKERS) { 2}

Re: famaki さん

投稿2016/07/27 12:24

think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

famaki

2016/07/30 00:22

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

2016/08/02 01: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(); とりあえず以上4行を書いてみましたが、5行目にalert()を書いても止まりません(3行目と4行目の間に書いたalert()では止まります)。 JSON.parse の応答待ちということでしょうか? おそらく重大な間違い(欠落や違反)があるものと思います また上記2行目で、ホルダを指定して、複数のデータファイル(marlers1.js, markers2.js, mark2015abcd.js などなど、いずれにも同じ構造で MARKERS=[]; が書かれている…)の中から1つを選択するにはどのように書けば宜しいのでしょうか? ご教授をお願い致します。
famaki

2016/08/02 02:00

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

2016/08/02 02:08

たびたびすみません、応答がないのは3行目でした!
famaki

2016/08/02 02:46

ローカルファイルでテストしたいのですが、とりあえずテスト用のファイルを3つ自前のサーバに置いて読めるようにはなりましたが、 エラー(1/3) VM292:1 Uncaught SyntaxError: Unexpected token u(anonymous function) @ xhr.js:25 エラー(2/3) index.html:28 Uncaught ReferenceError: MARKERS is not definedonload @ index.html:28 エラー(3/3) 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までは、まだ道遠し…
famaki

2016/08/02 02:48

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

2016/08/02 02:54

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

2016/08/02 02:59

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

2016/08/02 03:24 編集

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/
famaki

2016/08/02 04:20

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問