如何读取带有坐标的 JSON 文件并将其绘制在地图上？

Question

我的 JSON 文件：

[
  {
    "coordinate": [45.464743, 9.189135799999999],
    "Indirizzo": "Bike Sharing P.za Duomo Milano"
  },
  {
    "coordinate": [45.4664299, 9.1976032],
    "Indirizzo": "Bike Sharing P.za S.Babila Milano"
  },
  {
    "coordinate": [45.454943, 9.162632600000002],
    "Indirizzo": "Bike Sharing P.za Cadorna Milano"
  },
  ...
]

我想用 OpenStreetMap 制作一个地图，并为每个坐标的地址添加一个标记。

我试过这个：

<div id="map_id" style="width:100%;height:500px;"></div>
<script>
var map_var = L.map('map_id').setView([45.4642700,  9.1895100], 16);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map_var);

L.marker([45.4642700,  9.1895100]).addTo(map_var)
    .bindPopup('Milan')
    .openPopup();

$.getJSON( "bike_coordinate.json", function(json1) {
   $.each(json1, function(key, data) {
   for (var i = 0; i < json1.length; i++) {
    var place = json1[i];
       // Creating a marker and putting it on the map
    var customIcon = L.icon({
    iconSize:     [38, 40], // size of the icon
    iconAnchor:   [10, 40], // point of the icon which will correspond to marker's location
    popupAnchor:  [5, -40] // point from which the popup should open relative to the iconAnchor
    });
    var marker = L.marker(place.coordinate, {icon: customIcon});
    marker_array.push(tmp_marker);
    tmp_marker.addTo(map_var).bindPopup(place.Indirizzo);
    }
   });
});
</script>

但它只显示在 bike_coordinate.json 中未读取的第一个标记。我遇到了这个错误：

未捕获的引用错误：$未定义于（索引）：217

Answer 1

您读取 JSON 文件的代码工作得很好，这是您处理结果数据的方式出了问题：

• 您对数组进行了两次迭代，一次使用

  $.each(json1

  ，第二次使用

  for (i = 0; i < locations.length; i++) {

  。其中一个必须走。
• 您在地图上添加了不存在的

  tmp_marker

  ：使用

  marker.addTo(map_var).bindPopup(place.Indirizzo);

  代替
• 您使用了未定义的

  marker_array

  变量，请将其删除，

• 您声明了自定义图标，但没有设置

  iconUrl

  ：它是必需的并且会破坏 Leaflet。例如：

  var customIcon = L.icon({
      iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-green.png',
      iconSize:     [38, 40],
      iconAnchor:   [10, 40],
      popupAnchor:  [5, -40]
  }); 
  

您可以将代码编写为

$.getJSON( "bike_coordinate.json", function(json1) {

     for (var i = 0; i < json1.length; i++) {
        var place = json1[i];

        // Creating a marker and putting it on the map
        var customIcon = L.icon({
            iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-green.png',
            iconSize:     [38, 40], 
            iconAnchor:   [10, 40],
            popupAnchor:  [5, -40]
        }); 
        var marker = L.marker(place.coordinate, {icon: customIcon});
        marker.addTo(map_var).bindPopup(place.Indirizzo);
    }

});

还有演示 https://plnkr.co/edit/PJi8HzqTJJTB5SnJJnak?p=preview

Answer 2

这里的问题是，当您尝试循环

json

项时，您正在使用额外的循环。

事实上

$.each()

在这里就足够了，你不需要在其中使用

for

循环，并且

data

回调函数的

$.each()

参数将保存你需要的数据，以填充

 place

物体。

这就是您的代码：

$.getJSON( "bike_coordinate.json", function(json1) {
   $.each(json1, function(key, data) {
    var place = data;
       // Creating a marker and putting it on the map
    var customIcon = L.icon({
    iconSize:     [38, 40], // size of the icon
    iconAnchor:   [10, 40], // point of the icon which will correspond to marker's location
    popupAnchor:  [5, -40] // point from which the popup should open relative to the iconAnchor
    }); 
    var marker = L.marker(place.coordinate, {icon: customIcon});
    marker.addTo(map_var).bindPopup(place.Indirizzo);
   });
});

如果您正确读取和迭代数据，那么您所需要做的就是调整代码并分配标记。

编辑：

确保在页面中包含所有必需的 JS 库（例如 jQuery），并将文件放置在应用程序的

/resources

下的正确目录中，以便可以正确读取。

Answer 3

对于那些通过搜索来这么晚的人：

定义 customIcon 的代码应该位于循环和函数之外，因为它的定义是不变的：

// Creating a marker and putting it on the map
    var customIcon = L.icon({
      iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-green.png',
      iconSize: [38, 40],
      iconAnchor: [10, 40],
      popupAnchor: [5, -40]
    }); 

$.getJSON( "bike_coordinate.json", function(json1) {
   for (var i = 0; i < json1.length; i++) {
    var place = json1[i];
    var marker = L.marker(place.coordinate, {icon: customIcon});
    marker.addTo(map_var).bindPopup(place.Indirizzo);
    } 
});