在带有 AJAX 的 Leaflet 中使用 JSON 而不是 GeoJSON答案

【问题标题】：Using JSON instead of GeoJSON in Leaflet with AJAX在带有 AJAX 的 Leaflet 中使用 JSON 而不是 GeoJSON
【发布时间】：2014-06-19 14:26:43
【问题描述】：

我正在寻找一种在使用 AJAX 的传单中使用 JSON 而不是 GeoJSON 的方法。需要使用 JSON 和 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

【问题讨论】：

标签： javascript ajax json leaflet

【解决方案1】：

我正在寻找一种在使用 AJAX 的传单中使用 JSON 而不是 GeoJSON 的方法。

好的：查看一些条款，

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

【讨论】：

【解决方案2】：

我知道这是一个迟到的答案，但您绝对可以在 Leaflet 中使用简单的 JSON 格式。

正如您所说，您收到带有 ajax 的 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);
}

【讨论】：