前提・実現したいこと
googleマップに複数の円を描画しようとしています。
htmlはmapを表示させるだけ、
javascriptで地図のセンターや円のプロパティを記述。(座標は除く)
jsonに座標だけ記述するようにしたいと考えています。
(座標を別ファイルにしたいのは、量が多いのと中身を変えたファイルを読ませて別の円を描画をするためです)
ちなみにこの3ファイルを同一ディレクトリに入れてローカルで操作しようと考えています。
質問事項
・javascriptのファイルからjsonのファイルを参照するにはjsにどのように記述すればよいでしょうか?
・外部のjsonファイルから読み込んだ変数をfor文で回すときはどのように記述すればよいのでしょうか?
(繰り返し処理はfor文くらいしか思いつかないのですが適切でしょうか?)
・jsonから座標情報はどのようにしてcenter: に渡せばよいのでしょうか?
・そもそもローカルで参照するのは不可能なのでしょうか? この記事は読みました。(回避する設定に変更しました)
該当のソースコード
javascript
function initMap() { // Create the map. var map = new google.maps.Map(document.getElementById('map'), { zoom: 5, center: {lat: xx.xx, lng: yy.yy}, mapTypeId: 'roadmap' }); for (var in ) { //繰り返しの方法 var cityCircle = new google.maps.Circle({ strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35, map: map, center: , //座標の渡し方 radius: 100000, }); }
json
[ {"lat":aa.aa,"lng": bb.bb}, {"lat":cc.cc,"lng": dd.dd}, {"lat":ee.ee,"lng": ff.ff}, ]
試したこと
https://teratail.com/questions/72744#reply-114851
この記事は読みましたが、"webページを表示したタイミング「のみ」"というのが今回の場合に該当するのかどうかが判別できませんでした。
https://www.sejuku.net/blog/21738#forEach-3
https://qiita.com/1mada/items/9a48f7053a6016b5fd5a
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。