时间戳

首页 > 解决方案 > JQuery：如何使用来自 json 的坐标添加传单标记

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

问题描述

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

json 示例：

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

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

jquery 代码：它在我的 html 上创建地图，并在“get_marker”单击事件时启动 ajax，它每 10 秒从我的 .php 文件中提取一个新的 json

$(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 坐标在地图上获取实际标记。我的地图上什么都没有显示。

我尝试使用 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 工作正常。

标签： phpjqueryjsonleafletmarker

解决方案

我认为你在考虑浮点问题。试试这个更简单的方法：

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

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

推荐阅读