dongyu4554
2018-06-05 16:50
浏览 145
已采纳

JQuery:如何使用json中的Coordinates添加Leaflet标记

I have a problem creating a marker on my leaflet map with coordinates from a json array.

json example:

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

(background info: this comes from a PHP file that fetches data from a database which updates the current position every 10 seconds)

The jquery code: It creates the map on my html and upon the "get_marker" click event it starts ajax which pulls a new json every 10 seconds from my .php file

$(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
  }) 
 };

everything above seems to be working fine The Problem is getting the actual marker on the map with the json coordinates. Nothing shows up on my map.

I tried accessing the long and lat values with json.longitude/json.latitude and then converting these into float => then saved in JS variables: var longitude. I then put the varibles into the L.marker.

my code:

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

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

The Problem seems to be the actual variables since hardcoding a set of coordinates into L.marker works fine.

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • douya7309 2018-06-06 07:08
    已采纳

    I think you're over-thinking the floating point issue. Try this simpler way:

    function drawmarker (json) {    
            var longitude = json.longitude;
            var latitude =  json.latitude;
    
            L.marker([latitude, longitude])
                   .bindPopup('hello')
                    .addTo(map);    
    };
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题