leaflet.js を使用してマップを作成し、json ファイルからポップアップ バブル html を作成しています。pic
json データに追加した1 つの新しいフィールドを除いて、バブルは効果的に取り込まれています。ロードされていない理由がわかりません。ブラウザによって「未定義」としてレンダリングされているだけです。なぜそれが読まれていないのか、誰かが示唆できますか? これらは関連ファイルの重要な部分だと思います。
data.json (抜粋)
[
{
"name": "Billys",
"address": "297 Mare Street, Hackney",
"lat": "51.545829",
"lng": "-0.055408",
"pic": "billy.jpg",
"year": 2013.0
},
{
"name": "Folber",
"address": "227 Mare Street",
"lat": "51.544397",
"lng": "-0.05524",
"pic": "folber.jpg",
"year": 2013.0
}
]
map.js(抜粋)
function initialize() {
var layer = new L.StamenTileLayer("holds");
var map = new L.Map("map", {
attributionControl: false,
center: new L.LatLng(51.545094, -0.05609),
zoom: 15
});
map.addControl(new L.Control.Attribution({
prefix: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
}));
map.scrollWheelZoom.disable();
map.addLayer(layer);
$.getJSON('data.json', function (data) {
places = data;
for (var i in places) {
place = places[i];
markers[i] = L.marker([place['lat'], place['lng']]).addTo(map);
markers[i].bindPopup('<div class="popup-words"><b>' + place['name'] + "</b><br/>" + place['address'] + "</div>" + "<img alt='" + place['name'] + "' src='img/logos/" + place['pic'] + "' width='60px' height='30px' class='popup-image'/>");
}
updateSlider(2013);
play();
});
}