Javascript Can'；t从控制台获取实时API数据，并将其放入传单上的阵列中_Javascript_Api_Leaflet

Javascript Can'；t从控制台获取实时API数据，并将其放入传单上的阵列中

javascript api leaflet

Javascript Can'；t从控制台获取实时API数据，并将其放入传单上的阵列中,javascript,api,leaflet,Javascript,Api,Leaflet,我正在尝试使用TFL的API制作一份伦敦自行车点的传单地图。我成功地编写了一个循环，从各自的json对象中获取每个bike location值，并将它们记录在控制台中我正在努力使用push函数将（）每个值推送到addressPoints数组中。我不清楚应该将push函数相对于console.log函数放置在何处，以便将需要的数据放入我的addressPoints数组中此外，当我将地图绘制代码设置为自己的函数时，地图根本无法显示，无论我是将其放在主体中的地图id之后还是之前。当我将其包含在与A

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

我正在努力使用push函数将（）每个值推送到addressPoints数组中。我不清楚应该将push函数相对于console.log函数放置在何处，以便将需要的数据放入我的addressPoints数组中

此外，当我将地图绘制代码设置为自己的函数时，地图根本无法显示，无论我是将其放在主体中的地图id之后还是之前。当我将其包含在与API的.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>


单张调试页
$.get（”https://api.tfl.gov.uk/BikePoint?app_id=“+'1728116f'+”&app_key=“+'81829E2AEE19D388098B671096BA242”，
功能（bikePoint）{
var i；
对于（i=0；i

无需推送，您只需使用

集群

作为回调，并在另一个

循环中使用其属性：

$。获取(
"https://api.tfl.gov.uk/BikePoint?app_id=“+'1728116f'+”&app_key=“+'81829E2AEE19D388098B671096BA242”，
簇
);
功能群集（地址点）{
var tiles=L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
maxZoom:18，
属性：“©；贡献者、积分和副本2012 LINZ”
}),
latlng=L.latlng（51.509865，-0.118092）；
var map=L.map（'map'{
中心：拉特林，
缩放：13，
图层：[瓷砖]
});
var markers=L.markerClusterGroup（）；
对于（变量i=0；i

#地图{
高度：180像素；
}