调用mapbox框架，使用javascript实现点击地图上的两点，获取两点间公交路线

要在JavaScript中利用Mapbox GL JS库实现地图上两点之间的公交路线查找，你需要先确保安装了Mapbox GL JS库并设置了API密钥。以下是一个简化的步骤示例：

1. **设置环境**:
首先，在HTML文件中引入Mapbox GL JS库和CSS样式：

   <link href='https://api.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.css' rel='stylesheet' />
   <script src='https://api.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.js'></script>

2. **初始化地图**:
在JavaScript中，创建一个新的Map实例并设置视口：

   mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
   var map = new mapboxgl.Map({
     container: 'map', // 容器id，例如id="map"
     style: 'mapbox://styles/mapbox/streets-v11', // 地图样式
     center: [-74.5, 40], // 中心坐标
     zoom: 12 // 初始缩放级别
   });

3. **添加交互事件监听器**:
使用`map.on('click')`监听地图点击事件，然后处理两点选择逻辑：

   map.on('click', function(e) {
     // 获取鼠标点击位置
     var feature = e.features[0];
     if (feature && feature.geometry.type === 'Point') {
       var pointA = feature.geometry.coordinates;

       // 添加第二个点击点的处理（可能需要再次触发点击事件或使用其他方式）
       map.on('click', function(e) {
         var feature2 = e.features[0];
         if (feature2 && feature2.geometry.type === 'Point') {
           var pointB = feature2.geometry.coordinates;
           
           // 这里通常需要发送请求到地图API（如Mapbox Directions API）获取公交路线
           getBusRoute(pointA, pointB);
         }
       });
     }
   });

4. **调用公交路线API**:
创建一个函数`getBusRoute`来调用Mapbox或类似服务的公交路线API，传递两点坐标：

   async function getBusRoute(pointA, pointB) {
     try {
       const response = await fetch(`https://api.mapbox.com/directions/v5/mapbox/driving/${pointA.join(',')},${pointB.join(',')}?access_token=${mapboxgl.accessToken}`);
       const directionsData = await response.json();

       // 处理返回的公交路线数据，例如显示在地图上或提供给用户
     } catch (error) {
       console.error('Error fetching route:', error);
     }
   }

记得替换上述代码中的`YOUR_MAPBOX_ACCESS_TOKEN`为你的实际Mapbox访问令牌。这只是一个基础的示例，实际应用中你可能需要处理更多的细节，比如错误处理、缓存策略等。