JavaScriptの変数スコープの仕様のため、
for
ループの中で非同期メソッドを呼ぶときは注意が必要です。
以下のサンプルは正しく動作しません。3個のマーカーをクリックすると、どれも同じ駅名が表示されてしまいます。
正しくはこちらのサンプルのように書く必要があります。
var rosen;
function init() {
rosen = new Rosen("map", {
apiKey: "2jr5nchcswemrfjj67jvjaqu", // アクセスキーはサンプル用です。実際にご利用されるときは書き換えてください。
});
var shinbashi = 22751;
var tokyo = 22828;
var akasaka = 22486;
rosen.getStationsByCode([shinbashi, tokyo, akasaka]).then(function(stations) {
for (var i = 0; i < stations.length; i++) {
var station = stations[i];
rosen.setStationMarker(station.code).then(function(marker) {
marker.on('click', function() {
// このコールバック関数が実行されるとき、
// 変数stationが参照している値はすでにループで変更されており、
// stationsの最後の要素を参照している。
// そのため、どのマーカーをクリックしても同じ駅名が表示されてしまう。
alert(station.name + "です");
});
});
}
});
}
window.addEventListener('load', init);