javascript - Leaflet.js 从 AJAX 添加层

Question

我有一个 ASP.NET 网站，其中包含一个用于显示数据的 Leaflet map 实例。我有一些下拉菜单，通过 jQuery 更改触发事件，这些下拉菜单依次获取下拉值并将它们传递给从服务器检索新数据的 Web 服务。该数据是 geoJson 数据，并以字符串的形式返回。尝试将这些新数据应用到 map 上是行不通的。这是代码，我知道返回的内容是正确的，我已将其输出到 Div，复制并手动加载它，并且运行良好。现在我正在为此抓狂。

我将 return 输出到 div 以证明它确实有效...

$("#MainContent_DropDownList1").change(function () {

    $.ajax({

        url: "services/AJAXMapping.asmx/GetNewData",
        dataType: "text",
        type: "POST",
        data: { species: $(this).val() },
        error: function (err) {

            alert("Error: " + err.responseText.toString())

        },
        success: function (data) {

            $("#testarea").html(data);
            geojson.clearLayers();

            geojson = L.geoJson((data), {
                style: choroStyle,
                onEachFeature: onEachFeature
            }).addTo(map);

        }
    });

});

Answer 1

我认为问题在于你没有将 json 字符串解析为对象。

geojson = L.geoJson((JSON.parse(data)), {
    style: choroStyle,
    onEachFeature: onEachFeature
}).addTo(map);

或者，您可以像使用 jquery 一样使用 $.parseJSON(data) 来代替 JSON.parse(data)。

您还可以将 ajax 调用的 dataType 设置为 json，但如果您仍想输出 geojson，则必须将数据对象转换回字符串数据到div。您可以使用 JSON.stringify(data)

来完成此操作

如果这不能解决您的问题，请发布您收到的错误消息。