add markers to leaflet map from results of ajax call - Uncaught TypeError: Cannot read property 'lat' of null

Question

我有一张传单地图，您可以在上面单击以添加标记，然后您可以在调用 ajax 查询的弹出窗口中单击 link。该查询基本上搜索原始标记 5k 以内的事件。所有这些都工作正常。

然后我想获取结果并添加新标记（可能与原始标记颜色不同）并将它们添加到地图中。我得到了结果，但我正在努力解析对象，因此无法将标记添加到地图中。谁能看出我做错了什么？

结果以这种格式到达

[{'Incident_ID': 26944, 'wkt': 'POINT (-1.375239 50.908906)'}, {'Incident_ID': 27509, 'wkt':'POINT (-1.375228 50.908886)'}, {'Incident_ID': 27430, 'wkt': 'POINT (-1.373876 50.908886)'}]

我的 JS 在这里：

var map = L.map('map1').setView([50.937832, -1.470623], 10);
<!--add map to display>-->
L.tileLayer('https://api.os.uk/maps/raster/v1/zxy/Light_3857/{z}/{x}/{y}.png?xxxxxxx', {
    attribution: '&copy; Crown copyright and database rights ' + new Date().getFullYear() + ' Ordnance Survey.',
    maxZoom: 20,
    minZoom: 7
}).addTo(map);
$("#clear").click(function() {
    map.removeLayer(marker)
    });
var marker = null;
            
map.on('click', function (e) {
    if (marker !== null) {
        map.removeLayer(marker);
    }
    marker = L.marker(e.latlng, {
        title: "Start Point",
        //draggable: true,
    }).addTo(map);
    var coords = "point({latitude:toFloat('" + e.latlng.lat.toString() +"'), longitude:toFloat('"+ e.latlng.lng.toString() +"')})";
    var link = $('<a href="#" class="showgraph">'+coords+'</a>').on('click', { value: coords }, function(x) {
                stuff = $.ajax({
                    url: 'http://localhost:8080/demo/geosearch/' + coords,
                    type: 'GET',
                    dataType: 'json' ,
                })
                .done(function( json ) {
                        obj = JSON.parse(stuff.responseText);
                        var n;
                        for (n in obj) {
                            L.marker(omnivore.wkt.parse(obj[n].wkt)).addTo(map);
                            //wkts.push(obj[n].wkt);
                        }
                    })
            });
    var div = $('<div />').text('Incidents within 5km of: ').append(link)[0];
    marker.bindPopup(div);
});

在 chrome 开发者工具中我看到了这个错误：

leaflet.js:5 Uncaught TypeError: Cannot read property 'lat' of null
at Object.project (leaflet.js:5)
at Object.latLngToPoint (leaflet.js:5)
at e.project (leaflet.js:5)
at e.latLngToLayerPoint (leaflet.js:5)
at e.update (leaflet.js:7)
at e.onAdd (leaflet.js:7)
at e._layerAdd (leaflet.js:6)
at e.whenReady (leaflet.js:6)
at e.addLayer (leaflet.js:6)
at e.addTo (leaflet.js:6)

Answer 1

我需要创建一个图层组来添加新标记

var markers = L.layerGroup();

并将标记添加到组

markers.addLayer(marker);
markers.addTo(map)

add markers to leaflet map from results of ajax call - Uncaught TypeError: Cannot read property 'lat' of null

add markers to leaflet map from results of ajax call - Uncaught TypeError: Cannot read property 'lat' of null

javascript

leaflet