#前書き
前回の「リアルタイムGTFS」をGoogleマップに表示するの続きです。
前回はこちら→
あと、Monacaのアドベントカレンダーにも載せさせていただいています。
間違っている記述や改善案など、いただけたら幸いです。
(間違っていることを生徒に教える可能性があるため、常に不安です)
#環境など
前回のものをベースにすることを前提にしています。
が、無くても今回のものは表示できると思います。(CSVファイルを読み込むだけなので)
#準備
本来は、プログラムを使って自動的に
①GTFSのZIPファイルをダウンロードして
②展開し
③中に入っているCSVを読み込む を行うことが望ましいと思いますが、
今回は①と②の作業を手作業で行います。
今回も、宇野バスさんのデータを利用していきます。
- データのダウンロード
宇野バスさんのデータよりzipファイルをダウンロード - 展開したデータをフォルダに移動
www ―┬―
├―
├― data ―┬― agency_jp.txt
├― agency.txt
└― ...
#今回やること
マッピングするのはバス停の位置を表示します。
CSVファイル(Jsonも)の読み込みとGoogle Map上にマッピングします。
(内容が薄いですが、授業の中では使うことが多いので)
経路検索は、続きに書きます。(Google Directions APIを使う予定)
→書きました(この薄い内容じゃ申し訳なさすぎて急遽書きました。途中ですが…)
最初から経路検索でMonacaのアドベントカレンダーに書けばよかった…
#1.GTFSを読み込む
###CSVファイルとして読み込むVer.
var csvList = [];
const $ = require('jquery');
$.ajax({
/* 取得するファイルを指定 */
url: './data/unoBus/stops.txt',
/* データの取得に成功した場合以下の処理 */
success: function(data) {
var tempList = data.split('\n');
for (var i = 0; i < tempList.length; i++) {
csvList[i] = tempList[i].split(",");
console.log(csvList[i][2]);
}
}
});
###Json形式で読み込むVer.
現在作成中
#2.読み込んだGTFSデータをマッピング
var csvList = [];
const $ = require('jquery');
の後ろに追記
var marker=[];
CSVを読み込んだFor文の後ろに追加
for (var i = 0; i < tempList.length; i++) {
csvList[i] = tempList[i].split(",");
console.log(csvList[i][2]);
// マーカー毎の処理
var markerLatLng = new google.maps.LatLng(csvList[i][4], csvList[i][5]); // 緯度経度のデータ作成
marker[i] = new google.maps.Marker({ // マーカーの追加
position: markerLatLng, // マーカーを立てる位置を指定
map: map, // マーカーを立てる地図を指定
title: csvList[i][2],
icon: {
url: 'img/icon_bus_stop.png',
scaledSize: new google.maps.Size(40, 40)
}//マーカーのアイコンを指定
});
}
});