在传单地图上显示JSON数据

如何解决在传单地图上显示JSON数据

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

我有一个开放的API，可提供实时数据。 -API HERE

我将Leaflet Maps用于地图。

我目前制作了2个脚本。

leafletmap.js

此脚本显示的是挪威奥斯陆中心位置的地图。

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,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.");

这是用于从API接收数据的代码。

api.js

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

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

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

这个端点是我需要使用的端点-https://gbfs.urbansharing.com/oslobysykkel.no/station_information.json

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

L.circle([*lat and lon to be inserted here*],{
        color: '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获得纬度和经度的位置）。如何使用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());
  });

Demo

在传单地图上显示JSON数据

如何解决在传单地图上显示JSON数据

解决方法

相关推荐