文章/答案/技术大牛

发布

社区首页 >问答首页 >无法将实时API数据从控制台获取到Leaflet上的数组中

问无法将实时API数据从控制台获取到Leaflet上的数组中
EN

Stack Overflow用户

提问于 2020-01-25 21:29:53

回答 1查看 53关注 0票数 0

我正在尝试使用TFL的API制作一张伦敦自行车点的传单地图。我已经成功地编写了一个循环，从各自的json对象中获取每个自行车位置值，并将它们记录到控制台中。

我很难使用push函数将每个值推送到我的addressPoints数组中。我不清楚应该将push函数相对于console.log函数放在什么位置，以便将需要的数据放到addressPoints数组中。

此外，当我将地图绘制代码放入自己的函数中时，地图根本无法显示，无论我将其放在主体中的地图id之后还是之前。当我将它包含在与来自应用程序接口的.get请求相同的脚本中时，控制台不会记录任何内容。

我已经在下面添加了到目前为止我拥有的代码。有人能帮上忙吗？我做错了什么？谢谢!

<!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>

javascript

api

leaflet

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-01-25 21:46:33

无需推送，您只需使用cluster作为回调，并在另一个for循环中使用其属性：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59909689

复制

相似问题

问无法将实时API数据从控制台获取到Leaflet上的数组中
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法将实时API数据从控制台获取到Leaflet上的数组中EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法将实时API数据从控制台获取到Leaflet上的数组中
EN