Question

我设置了以下回调函数以获取某些特定城市的坐标，根据该字符串是在文本字段中输入的字符串：

var readCoordinates = function(){

    $.ajax({
        url: "https://nominatim.openstreetmap.org/search?q=" + encodeURIComponent($("#inlineFormInputCitta").val()) + "+Italy&format=geocodejson",            
        dataType: "json",
        success: function (data) {

            setTimeout(function () {

                for (let i = 0; i < data.features.length; i++) {
                    let coordinate = data.features[i];

                    $("#tbody2").append("<tr><td>" + coordinate.geometry.coordinates + "</td></tr>");                                                  

                };

            }, 1000);
        }
    });

};

我想添加一个Leaflet Map来显示城市地图，根据它是我通过回调函数获得的坐标。我将以下<div>添加到我的HTML代码中：

<!-- using Leaflet library for free, step 1: create a </div> -->
    <div id="leaflet"></div>

然后，我在前面的代码段中添加了以下代码行：

var map = new L.Map('leaflet', {
                        center: [0, 0],
                        zoom: 0,
                        layers: [
                            new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                                'attribution': 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
                            })
                        ]
                    });

我在网页上看到的内容如下：

我应该如何在代码行中插入正确的坐标，以获取所需的特定区域的地图？

- - - - -编辑-----

我更改了代码，因为我初始化了地图并撤消了Ajax调用（感谢您指出）。通过创建一个新函数initMaps()，我在Ajax调用之外剪切并粘贴了上面的代码段：

function initMaps(){

    map = L.map('leaflet').setView([0, 0], 13);

    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        'attribution': 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
    }).addTo(map);

}

问题是现在要在Ajax调用函数下重置坐标，但是我不再看到该错误。

Answer 1

如果您看到地图的随机正方形（如我在屏幕快照中看到的那样），则可能意味着您没有正确加载 leaflet css
就像评论中所说的那样，如果您在每次ajax调用中致电new L.Map ，那么您不止一次初始化地图就会收到错误消息。
因此，一次（在ajax调用之外）初始化地图，然后将一些数据添加到初始化的地图。通常是新图层或GeoJson。在每次调用时，您都必须先清理前面的图层，然后创建一些新的图层。

如何通过API请求添加具有特定坐标的传单地图？

1 个答案: