0

leaflet.js を使用してマップを作成し、json ファイルからポップアップ バブル html を作成しています。picjson データに追加した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();
    });
}
4

0 に答える 0