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"
  }, ...]

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

我尝试过：

<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中未读取的第一个标记，我想我写错了代码，请问有人可以帮我吗？

我正在使用openstreet地图，传单。我是javascript新手，谢谢大家。

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下的正确目录中，以便可以正确读取。

如何使用坐标读取json文件并将其绘制在地图中？

2 个答案: