时间戳

首页 > 解决方案 > 如何通过 API 请求添加具有特定坐标的 Leaflet Map？

ajax - 如何通过 API 请求添加具有特定坐标的 Leaflet Map？

问题描述

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

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 调用（感谢您指出）。我通过创建一个新函数将上面的代码片段剪切并粘贴到 Ajax 调用之外initMaps()：

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调用函数下的坐标，但我不再看到那个错误了。

标签： ajaxapileafletcoordinates

解决方案

  1. 如果您看到随机的地图方块，就像我在您的屏幕截图上看到的那样，这可能意味着您没有正确加载传单 css

  2. 就像评论中所说的那样，如果您new L.Map在每个 ajax 调用中调用，那么您会多次初始化地图并且您会收到错误消息。

  3. 因此，初始化一次地图（在 ajax 调用之外），然后将一些数据添加到初始化的地图中。通常是一个新层或 GeoJson。每次调用时，您都必须先清理以前的层，然后再创建一些新层。

推荐阅读