Как добавить Leaflet Map с конкретными координатами через запрос API? - PullRequest
Новая
       24

Как добавить Leaflet Map с конкретными координатами через запрос API?

0 голосов
/ 18 июня 2019

Я установил следующую функцию обратного вызова, чтобы получить координаты какого-то определенного города, в соответствии с которым строка вводится в текстовое поле: 

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'
                            })
                        ]
                    });

На моей веб-странице появляется следующее:

* +1012 *Map

Как мне сделать, чтобы вставить правильные координаты в мои строки кода, чтобы получить карту нужного мне региона?

          • -EDITED - - - - -

Я изменил свой код, потому что я инициализировал карту, отменив вызов 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 сейчас, но я больше не вижу этой ошибки.

1 Ответ

1 голос
/ 19 июня 2019

  1. если вы видите случайные квадраты карты, как я вижу на скриншоте, это, вероятно, означает, что вы не загрузили листовку css правильно

  2. Как было сказано в комментариях, если вы звоните new L.Map на каждый вызов ajax , то вы инициализируете карту более одного раза и получаете сообщение об ошибке.

  3. Итак, инициализируйте вашу карту один раз (вне вызова ajax), а затем добавьте некоторые данные к вашей инициализированной карте.Обычно это новый слой или GeoJson.При каждом вызове вы должны будете сначала очистить предыдущие слои, а затем создать несколько новых.

...