在AJAX中使用JSON代替GeoJSON在使用AJAX的传单中使用

我正在寻找一种使用AJAX代替GeoJSON的方式。使用JSON和AJAX是必需的。在AJAX中使用JSON代替GeoJSON在使用AJAX的传单中使用

我设法使用AJAX调用JSON文件。但是，现在我很困惑我如何使用JSON中的数据在地图上绘制标记。我猜我不能使用L.geoJson（）。

HTML：

<div id="map" style="width: 800px; height: 500px"></div>

这是JavaScript文件：

var map; 
var overlay; 

var addPopupsFromLocations = function(locations) { 
    var popups = new Array(); 
    locations.forEach(function(location){ 
    console.log('creating popup for location ' + location.title); 

    console.log(location.latitude); 
    console.log(location.longitude); 
     }) ; 
}; 

function init() { 
     var map = L.map('map').setView([51.505, -0.09], 13); 

     L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', { 
      maxZoom: 18, 
      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 
       '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 
       'Imagery © <a href="http://mapbox.com">Mapbox</a>', 
      id: 'examples.map-i86knfo3' 
     }).addTo(map); 
    } 

$(document).ready(function(){ 
    init(); 
    $.ajax('locations.json', { 
     dataType: 'json', 
     success: addPopupsFromLocations, 
     error: function(xhr, st, et) { 
      console.warn(et); 
     } 
    }); 
});

这是JSON文件：

[ 
    { 
    "title": "Weathertop", 
    "link": "http://en.wikipedia.org/wiki/Weathertop", 
    "latitude": 51.505, 
    "longitude": -0.09, 
    "imageUrl": "assets/img/location-images/Weathertop.jpg" 
    }, 
{ 
    "title": "Rivendell", 
    "link": "http://lotr.wikia.com/wiki/Rivendell", 
    "latitude": -0.09, 
    "longitude": 51.505, 
    "imageUrl": "assets/img/location-images/Rivendell2.jpg" 
}, 
{ 
    "title": "Minas Tirith", 
    "link": "http://lotr.wikia.com/wiki/Minas_Tirith", 
    "latitude": 38.78, 
    "longitude": -77.18, 
    "imageUrl": "assets/img/location-images/320px-Minas_Tirith.jpg" 
} 

]

控制台：

creating popup for location Weathertop 
custom.js (line 7) 
51.505 
custom.js (line 9) 
-0.09 
custom.js (line 10) 
creating popup for location Rivendell 
custom.js (line 7) 
-0.09 
custom.js (line 9) 
51.505 
custom.js (line 10) 
creating popup for location Minas Tirith 
custom.js (line 7) 
38.78 
custom.js (line 9) 
-77.18

来源

2014-06-19 wag0325

我正在寻找一种使用JSON代替GeoJSON的方式使用AJAX的传单。

好：回顾一些术语，

JSON是一个基本的数据交换格式。它不包含任何特别的东西。
GeoJSON是JSON的一个子集，它被格式化为对地图友好并且可以理解为Leaflet之类的东西。

如果你想使用L.geoJson，你需要重新格式化你的数据，以便它符合GeoJSON specification。你可以用基本的JavaScript来做到这一点。

var geojsonFormattedLocations = locations.map(function(location) { 
    return { 
     type: 'Feature', 
     geometry: { 
     type: 'Point', 
      coordinates: [location.longitude, location.latitude] 
     }, 
     properties: { 
      location 
     } 
    }; 
});

来源

2014-06-19 15:40:23 tmcw

我知道这是一个迟到的答案，但你肯定可以使用简单的JSON格式与单张。

正如你所说，你会收到带有ajax的JSON，并且运行一个循环每个JSON对象的函数，并为每个JSON对象在地图上添加一个标记。例如：

var response = req.responseText; 
var arr = JSON.parse(response); 

for (var i=0 ; i<arr.length ; i++) { 
    L.marker([arr[i].latitude, arr[i].longitude]).addTo(map); 
}

来源

2017-05-03 22:18:12 treecon

在AJAX中使用JSON代替GeoJSON在使用AJAX的传单中使用

回答

相关问题