Question

我通过使用Leaflet库在自己的网页上插入了一张地图。我要做的是根据用户在文本字段中键入的城市来显示放大到特定区域的地图。

我首先在JS文件上初始化了地图：

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);

}

我的JavaScript代码也有一个Ajax调用。我现在想做的是重置Ajax调用上的坐标。我写了以下内容：

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].geometry.coordinates;   

                    console.log(coordinate);

                    map.setView(coordinate, 13);

                    console.log("ajax and for loop have been activated");
                    console.log(coordinate.geometry.coordinates);
                };
                $("#ristoranti").prop("disabled", false);

            }, 1000);
        }
    });

};

我在URL中引用的API如下：https://nominatim.openstreetmap.org/search?q=Roma%20Italy&format=geocodejson

我所做的是尝试在此处重置坐标：map.setView(coordinate, 13);

循环了JSON对象中的元素之后，请参见以下内容：

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

我可能会在控制台中显示几个坐标，请参见以下内容：

那是因为在我通过API请求得到的JSON文件中，有几个：

其结果是以下地图，该地图未在任何地方缩放：

我应该使用哪个坐标来显示该特定区域？

- - 编辑---

我更改了代码，因为我试图获取一个特定的子对象，即下面屏幕中的子对象（具有“ type” =“ city”）：

新的代码段是下面的代码段，我在其中添加了 if语句：

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++) {

                    debugger;    

                    let type = data.features[i].properties.geocoding.type;

                    if(  $(type).val() === "city") {

                    let coordinate = data.features[i].geometry.coordinates;

                    let lng = coordinate[0];

                    let lat = coordinate[1];

                      map.setView([lng, lat], 13);

                    console.log("ajax and for loop have been activated");
                    console.log(coordinate);}
                };

                $("#ristoranti").prop("disabled", false);

            }, 1000);
        }
    });

};

我正在调试器，并获得许多未定义的值：

Answer 1

我会做这样的事情：

if (typeof data.features[0] !== 'undefined') {
    let coordinate = data.features[0].geometry.coordinates;
    var latlng = L.latLng(coordinate.reverse());
    map.flyTo(latlng, 12)
}

确保数组中有东西
从第一项获取数据，因为在大多数情况下它应该是正确的
使用这些坐标创建一个latlng。请注意，有时您需要反转阵列以具有正确的位置。
使用flyTo使坐标平滑过渡。 12是缩放级别

由于只需要一个位置，因此不需要循环数据。您可以用它替换for。

Answer 2

您在这里遇到两个问题：

Nominatim API的响应返回了多个搜索结果，每个搜索结果都在响应Feature内的一个GeoJSON FeatureCollection中。您可以选择要在地图中关注的搜索结果（第一个？），还是由用户选择。
You're not aware that GeoJSON uses longitude-latitude (or x-y) coordinates, whereas Leaflet uses latitude-longitude (or y-x)

初始化地图后，如何将坐标重置为Ajax调用？

2 个答案: