Как прочитать файл JSON с координатами и построить их на карте? - PullRequest
Новая
       27

Как прочитать файл JSON с координатами и построить их на карте?

0 голосов
/ 03 июля 2018

У меня есть 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 map и добавить маркер для каждой координаты и адреса.

Я пробовал это: 

<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 map, листовку. Я новичок в javascript, спасибо всем.

Ответы [ 2 ]

0 голосов
/ 03 июля 2018

Ваш код, считывающий файл 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

0 голосов
/ 03 июля 2018

Ваша проблема здесь в том, что вы используете дополнительный цикл, когда пытаетесь перебрать элементы 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);
   });
});

Если вы правильно прочитали и перебрали данные, то все, что вам нужно, это адаптировать свой код и назначить маркеры.

Edit:

Обязательно включите все необходимые библиотеки JS, такие как jQuery, на свою страницу и разместите файл в нужном каталоге под /resources своего приложения, чтобы его можно было правильно прочитать.

...