You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

基于Leaflet查找路线起点与终点的最近自行车停靠点

需求:Leaflet路线规划网页 + 匹配最近自行车停靠点

我正在进行一个学校项目,需要创建一个使用Leaflet生成路线的网页。同时我有一份包含自行车停靠点的JSON文件,核心需求是:找到路线起点和终点各自对应的最近停靠点。

当前代码

<script>
    var map_var = L.map('map_id').setView([40.72730240765651, -73.9939667324035], 16);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map_var);

    var startPosition = L.latLng();
    var endPosition = L.latLng();

    L.Routing.control({
        waypoints: [
            startPosition,
            endPosition,
        ],
        routeWhileDragging: true,
        collapsible: true,
        geocoder: L.Control.Geocoder.nominatim()
    }).addTo(map_var);

    $.getJSON("citybike.json", function (json1) {
        for (var i = 0; i < json1.stationBeanList.length; i++) {
            var place = json1.stationBeanList[i];
            coordinate = [place.latitude, place.longitude];

            /*var marker = L.marker(coordinate);
            marker.addTo(map_var).bindPopup(`<b>${place.stAddress1}</b><br>Status: ${place.statusValue}<br>Bici disponibili: ${place.availableBikes}<br>Docks disponibili: ${place.availableDocks}`);*/
        }

    });
</script>

JSON文件格式

{
    "stationBeanList": [
        {
            "id": 72,
            "stationName": "W 52 St & 11 Ave",
            "availableDocks": 32,
            "totalDocks": 39,
            "latitude": 40.76727216,
            "longitude": -73.99392888,
            "statusValue": "In Service",
            "statusKey": 1,
            "availableBikes": 6,
            "stAddress1": "W 52 St & 11 Ave",
            "stAddress2": "",
            "city": "",
            "postalCode": "",
            "location": "",
            "altitude": "",
            "testStation": false,
            "lastCommunicationTime": null,
            "landMark": ""
        }
    ]
}

内容的提问来源于stack exchange,提问作者tommy

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.21 02:55:30