Thêm cửa sổ bật lên vào lớp GeoJSON trong Tờ rơi

Tôi mới làm việc với API Leaflet và đang gặp rắc rối với việc tạo cửa sổ bật lên cho lớp GeoJSON. Tôi đã xem bài viết sau đây như một tài liệu tham khảo và vẫn đang gặp khó khăn: ràng buộc các mảng lồng nhau như các cửa sổ bật lên Geojson trong tờ rơi

Dữ liệu GeoJson của tôi trông như:

{
    "type": "FeatureCollection",
    "features": [
        {
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -73.97364044189453,
                    40.66893768310547
                ]
            },
            "type": "Feature",
            "properties": {
                "lon": -73.97364044189453,
                "lat": 40.66893768310547,
                "version": "1.1",
                "t": 1381167616,
                "device": "iPhone3,3",
                "alt": 67,
                "os": "6.1.3"
            }
        },
        {
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -73.96121215820312,
                    40.66240692138672
                ]
            },
            "type": "Feature",
            "properties": {
                "lon": -73.96121215820312,
                "lat": 40.66240692138672,
                "version": "1.1",
                "t": 1381171200,
                "device": "iPhone3,3",
                "alt": 45,
                "os": "6.1.3"
            }
        }

    ]
}

Tờ rơi của tôi js như sau:

// create a variable to load Stamen 'toner' tiles
var layer = new L.StamenTileLayer("toner");

// initialize and set map center and zoom
var map = L.map('map', {
    center: new L.LatLng(40.67, -73.94),
    zoom: 12
});

// create the map 
map.addLayer(layer);

// on each feature use feature data to create a pop-up
function onEachFeature(feature, layer) {

    if (feature.properties) {

        var popupContent;
        popupContent = feature.properties.t;

        console.log(popupContent);    
    }
    layer.bindPopup(popupContent);
}

// grab the processed GeoJSON through ajax call
var geojsonFeature = (function() {
        var json = null;
        $.ajax({
            'async': false,
            'global': false,
            'url': "/data/test_random.json",
            'dataType': "json",
            'success': function (data) {
                json = data;
            }
        });
        return json;
    })();

// create an object to store marker style properties
var geojsonMarkerOptions = {
    radius: 10,
    fillColor: "rgb(255,0,195)",
    color: "#000",
    weight: 0,
    opacity: 1,
    fillOpacity: 1
};

// load the geojson to the map with marker styling
L.geoJson(geojsonFeature, {

    style: function (feature) {
        return feature.properties && feature.properties.style;
    },

    onEachFeature: onEachFeature,

    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions)
    }
}).addTo(map);

Cuộc console.log(popupContent);gọi trong onEachFeaturehàm đang trả về dữ liệu, tuy nhiên khi tôi nhấp vào các điểm GeoJSON trên bản đồ, tôi gặp lỗi sau: Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist.

Tôi đã cố gắng xem xét điều này cho đến nay không có thành công.

Đây là một ví dụ mà tôi có khi tải Geojson từ dịch vụ WFS: http://maps.gcc.tas.gov.au/dogexerciseareas.html

Đây là một ví dụ khác đang tải topojson (tương tự, nhưng khác nhau): http://agl.pw/examples/NRM_Regions/map.html

Đây là một số mã đơn giản tôi sử dụng để tải một lớp:

var myLayer = L.geoJson().addTo(map);
$.getJSON("data/buildings.json", function(json) {
  myLayer.addData(json);
});

Sau đó, bạn có thể thực hiện tương tác và tạo kiểu với một cái gì đó như thế này:

    success : function (response) {
        DogExerciseAreas = L.geoJson(response, {
            style: function (feature) {
                return {
                    stroke: false,
                    fillColor: 'FFFFFF',
                    fillOpacity: 0
                };
            },
            onEachFeature: function (feature, layer) {
                popupOptions = {maxWidth: 200};
                layer.bindPopup("<b>Site name:</b> " + feature.properties.sitename +
                    "<br><b>Dog Exercise: </b>" + feature.properties.dog_exercise +
                    "<br><br>Please ensure that tidy up after your dog. Dogs must be kept under effective control at all times."
                    ,popupOptions);
            }
        }).addTo(map);
    }

EDIT: một ví dụ từ trang web tờ rơi về các điểm tạo kiểu (từ đây http://leafletjs.com/examples/geojson.html ):

var geojsonMarkerOptions = {
    radius: 8,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};

L.geoJson(someGeojsonFeature, {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions);
    }
}).addTo(map);

EDIT2: Đã thêm một giải pháp cho vấn đề này. Xem tại đây: https://gist.github.com/alexgleith/7112515

Tất cả những gì bạn cần làm bây giờ là chỉnh sửa bit có ghi 'popupContent' để thêm bit của bạn và thay đổi mã để tải dữ liệu từ tệp.