JQuery：如何使用来自 json 的坐标添加传单标记

Question

我在使用 json 数组的坐标在传单地图上创建标记时遇到问题。

json 示例：

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

（背景信息：这来自一个 PHP 文件，该文件从数据库中获取数据，该数据库每 10 秒更新一次当前位置）

jquery 代码：它在我的 html 上创建地图，并在 "get_marker" 单击事件后启动 ajax，它会拉出一个新的 json每 10 秒从我的 .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: '&copy; 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 坐标获取实际标记。我的地图上没有显示任何内容。

我尝试使用 json.longitude/json.latitude 访问 long 和 lat 值，然后将它们转换为 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 中工作正常。

Answer 1

我认为您对浮点数问题想得太多了。试试这个更简单的方法：

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

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

JQuery：如何使用来自 json 的坐标添加传单标记

JQuery: how to add a Leaflet marker with Coordinates from json

php

jquery

json

marker

leaflet