листовка geo JSON .onEachFeature не является функцией? - PullRequest
0 голосов
/ 03 апреля 2020

Я пытаюсь реализовать модель «Добавить в корзину» с серией точечных всплывающих окон (вы нажимаете на точку и появляется кнопка «Добавить в корзину», которая добавляет информацию из всплывающего окна в отдельную ул. tag.

У меня был следующий код, который работал, но возвращал значения undefined:

        var content = [];

        //create popups
        function onEachPopup(feature, layer) {
            layer.bindPopup("<button type='button' onclick = 'addToCart(" + layer._leaflet_id + 
                            ")'>Add to Cart</button>")
        };

        //create geoJSON
        geojson = L.geoJSON(pointfixed, {
        pointToLayer: function (feature, latlng){
            return L.circleMarker(latlng, {
                radius: 3,
                fillColor: getColor(feature.properties.Coordinate),
                color: "#000",
                fillOpacity: 1,
                weight: 1
                }); 
        },
            onEachFeature : onEachPopup, function(feature, layer){feature.layer=layer}
        }).addTo(map);

        //add to cart function
        function addToCart(i){
            content.push(geojson._layers[i])
            content.forEach(function (c){
            document.getElementById("cartlist").innerHTML += '<li>' + content + '</li>' 
        })
        };

Это работает, но возвращает значение undefined.

Я думал у меня возникла проблема с синхронизацией при создании geo json, поэтому я попытался немного изменить положение вещей, например:

        geojson = L.geoJSON(pointfixed, {
        pointToLayer: function (feature, latlng){
            return L.circleMarker(latlng, {
                radius: 3,
                fillColor: getColor(feature.properties.Coordinate),
                color: "#000",
                fillOpacity: 1,
                weight: 1
                }); 
        },
        }).addTo(map);
    geojson.onEachFeature(onEachPopup);

Это вызывает проблему с всплывающими окнами (они не отображаются), и я получить следующую ошибку: Uncaught TypeError: geo json .onEachFeature не является функцией

enter image description here

Я все еще довольно новичок в листовке и у меня трудно определить, откуда возникла проблема. Есть ли что-то очевидное, что я упускаю?

1 Ответ

0 голосов
/ 03 апреля 2020

Вы получаете неопределенное значение, потому что ваш слой не имеет leaflet_id, потому что слой еще не добавлен на карту.

Измените свой код на:

geojson = L.geoJSON(pointfixed, {
        pointToLayer: function (feature, latlng){
            return L.circleMarker(latlng, {
                radius: 3,
                fillColor: getColor(feature.properties.Coordinate),
                color: "#000",
                fillOpacity: 1,
                weight: 1
                }); 
        },
}).addTo(map);

geojson.eachLayer(function(layer){
     layer.bindPopup("<button type='button' onclick = 'addToCart(" + layer._leaflet_id +")'>Add to Cart</button>");
});
...