JQuery: как добавить маркер Leaflet с координатами из json - PullRequest
Новая
       12

JQuery: как добавить маркер Leaflet с координатами из json

0 голосов
/ 05 июня 2018

У меня проблема с созданием маркера на карте листовки с координатами из массива json.

Пример json:

{"id": "1", "longitude":" 8.1876 "," latitude ":" 50.1297 "," name ":" Rhineland-Palatinate "}

(справочная информация: это происходит из файла PHP, который извлекает данные из базы данных, котораяобновляет текущую позицию каждые 10 секунд)

Код jquery: он создает карту в моем html и при событии щелчка get_marker запускает ajax, который каждые 10 секунд извлекает новый json из моего файла .php 

$(document).ready(function () { 
            var map = L.map('map', {
                center: [50.0231, 8.8849],
                zoom: 9
            });
            L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© OpenStreetMap contributors'
            }).addTo(map);

$("#get_marker").click(function(event){
   startajax();
  alert("get marker clicked");
 }); 

$("#delete_marker").click(function(event){
   deletemarkers();
      alert("marker deleted");
 });

function startajax () { 
  $.ajax({
  url: ('query_fetcharray.php'),
  data: {},
  type: 'POST',
  timeout: 10000,
  dataType: 'json',
  error: function() { 
    alert('Error, no Data received!');
  },
  success: drawmarker
  }) 
 };

все вышеперечисленное работает нормально. Проблема в том, чтобы получить реальный маркер на карте с координатами json.На моей карте ничего не отображается.

Я попытался получить доступ к значениям long и lat с помощью json.longitude / json.latitude, а затем преобразовать их в float => и затем сохранить в переменных JS: var longitude.Затем я помещаю переменные в L.marker.

мой код: 

function drawmarker (json) {    
        var longitude = parseFloat(json.longitude);
        var latitude = parseFloat(json.latitude);

        L.marker([longitude, latitude], {
               clickable: true
          })
               .bindPopup('hello')
                .addTo(map);    
};

Проблема, похоже, является фактическими переменными, поскольку жесткое кодирование набора координат в L.marker работает нормально.

1 Ответ

0 голосов
/ 06 июня 2018

Я думаю, вы слишком обдумываете проблему с плавающей запятой.Попробуйте этот более простой способ: 

function drawmarker (json) {    
        var longitude = json.longitude;
        var latitude =  json.latitude;

        L.marker([latitude, longitude])
               .bindPopup('hello')
                .addTo(map);    
};
...