Невозможно получить действительные данные API с консоли и в массив на Leaflet - PullRequest
Новая
       0

Невозможно получить действительные данные API с консоли и в массив на Leaflet

0 голосов
/ 25 января 2020

Я пытаюсь сделать Leaflet карту точек велосипеда в Лондоне, используя API TFL. Мне удалось написать al oop, извлечь каждое из значений местоположения велосипеда из соответствующих им json объектов и зарегистрировать их в консоли.

Я изо всех сил пытаюсь использовать pu sh функция для pu sh () каждого значения в моем массиве addressPoints. Мне неясно, куда я должен поместить функцию pu sh относительно функции console.log, чтобы получить нужные данные в моем массиве addressPoints.

Кроме того, когда я делаю код рисования карты в своей собственной функции, карта вообще не отображается, независимо от того, помещаю ли я ее после идентификатора карты в теле или раньше. Когда я включаю его в тот же сценарий, что и запрос .get от API, консоль ничего не регистрирует.

Я добавил код, который у меня есть ниже. Может кто-нибудь помочь с этим? Что я делаю неправильно? Спасибо! 

<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet debug page</title>
    <!-- Source code -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js" integrity="sha512-WXoSHqw/t26DszhdMhOXOkI7qCiv5QWXhH9R7CgvgZMHz1ImlkVQ3uNsiQKu5wwbbxtPzFXd1hK4tzno2VqhpA==" crossorigin=""></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS -->
    <link rel="stylesheet" href="screen.css" />
    <link rel="stylesheet" href="MarkerCluster.css" />
    <link rel="stylesheet" href="MarkerCluster.Default.css" />
    <script src="leaflet.markercluster-src.js"></script>
    <!-- Getting data from the TfL API -->
    <script type="text/javascript">
      $.get("https://api.tfl.gov.uk/BikePoint?app_id=" + '1728116f' + "&app_key=" + '81829e2aee19d388098b671096ba2242',
        function(bikePoint) {
          var i;
          for (i = 0; i < bikePoint.length; i++) {
            console.log(bikePoint[i].commonName, bikePoint[i].lat, bikePoint[i].lon);
          }
        });

      // var addressPoints = [];
      // addressPoints.push();

      function cluster(addressPoints) {

        var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Points &copy 2012 LINZ'
          }),
          latlng = L.latLng(51.509865, -0.118092);

        var map = L.map('map', {
          center: latlng,
          zoom: 13,
          layers: [tiles]
        });

        var markers = L.markerClusterGroup();

        for (var i = 0; i < addressPoints.length; i++) {
          var a = addressPoints[i];
          var title = a[2];
          var marker = L.marker(new L.LatLng(a[0], a[1]), {
            title: title
          });
          marker.bindPopup(title);
          markers.addLayer(marker);
        }

        map.addLayer(markers);

      }
    </script>
    <!-- End of the scripts -->
  </head>
  <body>
    <div id='map'></div>
  </body>
</html>

1 Ответ

0 голосов
/ 25 января 2020

Нет необходимости в pu sh, вы можете просто использовать cluster в качестве обратного вызова и использовать его свойства внутри другого for l oop: 

$.get(
  "https://api.tfl.gov.uk/BikePoint?app_id=" + '1728116f' + "&app_key=" + '81829e2aee19d388098b671096ba2242',
  cluster
);

function cluster(addressPoints) {
  var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 18,
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Points &copy 2012 LINZ'
    }),
    latlng = L.latLng(51.509865, -0.118092);

  var map = L.map('map', {
    center: latlng,
    zoom: 13,
    layers: [tiles]
  });

  var markers = L.markerClusterGroup();

  for (var i = 0; i < addressPoints.length; i++) {
    var a = addressPoints[i];
    var marker = L.marker(new L.LatLng(a.lat, a.lon), {
      title: a.commonName
    });
    marker.bindPopup(a.commonName);
    markers.addLayer(marker);
  }

  map.addLayer(markers);
}
#map {
  height: 180px;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.3/MarkerCluster.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.3/MarkerCluster.Default.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.3/leaflet.markercluster-src.js"></script>

<div id='map'></div>

В качестве альтернативы, если вы хотите сохранить свою функцию cluster как есть, вы можете map результаты, прежде чем передавать их: 

$.get(
  "https://api.tfl.gov.uk/BikePoint?app_id=" + '1728116f' + "&app_key=" + '81829e2aee19d388098b671096ba2242',
  function(bikePoints) {
    var formattedValues = bikePoints.map(function(a) {
      return [a.lat, a.lon, a.commonName];
    });
    cluster(formattedValues);
  }
);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...