Javascript 在传单地图上显示json数据

我想创建一个web应用程序，它将显示站点上可用的景点和自行车的数量

我有一个提供实时数据的开放API

我在用地图

我目前已经做了2个脚本

传单地图.js

const GbfsClient = require('gbfs-client');
const gbfsClient = new GbfsClient('https://gbfs.urbansharing.com/oslobysykkel.no/');

gbfsClient.stationInfo()
    .then(osloStatus => console.log(osloStatus));

这个脚本显示的是一张以挪威奥斯陆为中心位置的地图

var mymap = L.map('mapid').setView([59.9139, 10.7522], 13); // This line is lan,lat for location, "13" is a zoom parameter.

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1
    }).addTo(mymap);

    

    L.circle([59.9139, 10.7522], 60, { // This is what I want to use as bike station 
location
        color: 'blue',
        fillColor: 'blue',
        fillOpacity: 0.5
    }).addTo(mymap).bindPopup("I am a circle.");

我想在地图上显示自行车站的位置

这个终点是我需要用到的-

目标：更改代码的硬脚本部分>

L.circle([*lat and lon to be inserted here*], 60, {
        color: 'blue',
        fillColor: 'blue',
        fillOpacity: 0.5
    }).addTo(mymap).bindPopup("**Name of bike station here.**");

通过端点>Lat、lan、自行车站名称的响应进行更改

JSON响应>

{
  "last_updated": 1553592653,
  "data": {
    "stations": [
      {  
        "station_id":"627",
        "name":"Skøyen Stasjon",
        "address":"Skøyen Stasjon",
        "lat":59.9226729,
        "lon":10.6788129,
        "capacity":20
      },
      {  
        "station_id":"623",
        "name":"7 Juni Plassen",
        "address":"7 Juni Plassen",
        "lat":59.9150596,
        "lon":10.7312715,
        "capacity":15
      },
      {  
        "station_id":"610",
        "name":"Sotahjørnet",
        "address":"Sotahjørnet",
        "lat":59.9099822,
        "lon":10.7914482,
        "capacity":20
      }
    ]
  }
}

EDIT1

我意识到我写了很多文章，把事情弄得一团糟。 很快-我想在我的地图上显示自行车站的位置（我有API中的lat和lan位置）。如何使用API显示它。有150多个地点，所有地点都是手工添加的。这不是交易，将来也有可能添加/删除某些地点

---

对于位置标记，我硬编写了一个红色圆圈。

您可以使用API显示它们，只需获取如下数据，然后在它们上面迭代，并显示带有弹出信息的标记。因为您有数百个标记，所以最好使用

preferCanvas:true

选项，以避免渲染标记时可能出现的浏览器性能不佳

fetch("https://gbfs.urbansharing.com/oslobysykkel.no/station_information.json")
  .then((response) => response.json())
  .then((responseData) => {
    console.log(responseData.data);
    const stations = responseData.data.stations;

    const layerGroup = L.featureGroup().addTo(map);

    stations.forEach(({ lat, lon, name, address }) => {
      layerGroup.addLayer(
        L.marker([lat, lon], { icon }).bindPopup(
          `Name: ${name}, Address: ${address}`
        )
      );
    });

    map.fitBounds(layerGroup.getBounds());
  });

---

尝试对演示执行相同操作后，我收到一个错误-未捕获类型错误：无法解析模块说明符“传单”。相对引用必须以“/”、“/”或“./”开头。你知道怎么了吗？我想这是件很重要的事也许你们并没有安装传单。你可以下载我提供的emo，播放aroundI检查的依赖项，我会立即安装它。仍然收到此错误。我正在运行live server extension，因为在我收到CORS相关错误之前，我甚至下载了整个手册作为目录，并在HTML标题中创建了一个路径，仍然存在错误。我正在使用你的演示。我不确定你的问题是什么，因为我不知道你的机器的设置，也不知道你提到的服务器的配置。如果一切都按预期设置，这个答案应该有效。请接受它，如果它对你有帮助，请投票表决。