如何在React+Mapbox-gl应用中获取里程数据计算每公里成本？

别担心，这个需求完全可行！你已经在请求里加了annotations: 'distance'，其实Mapbox Directions控件本身提供了一个route事件，当路线生成（包括用户输入起点终点后，或者路线更新时）就会触发这个事件，回调里就能拿到完整的路线数据，包括你需要的里程。

下面是修改你的代码来实现这个功能的步骤：

1. 初始化组件state存储里程 #

首先在组件的构造函数里初始化state，用来保存获取到的里程数据：

constructor(props) {
  super(props);
  this.state = {
    totalDistanceKm: 0 // 单位：公里
  };
}

2. 监听route事件获取里程 #

在你创建directions实例之后，添加事件监听，从返回的路线数据中提取距离：

const directions = new MapboxDirections({
  accessToken: mapboxgl.accessToken,
  unit: 'metric',
  profile: 'mapbox/driving',
  annotations: 'distance'
});

// 监听route事件，获取路线数据
directions.on('route', (e) => {
  // e.route包含所有生成的路线，这里取第一条路线的总距离
  const totalDistanceMeters = e.route[0].distance;
  // 转换成公里（因为metric单位下distance是米）
  const totalDistanceKm = totalDistanceMeters / 1000;
  // 更新组件state，方便后续使用
  this.setState({ totalDistanceKm });
  
  // 这里可以直接计算每公里成本，比如假设每公里成本是0.5元
  const costPerKm = 0.5;
  const totalCost = totalDistanceKm * costPerKm;
  console.log(`总里程：${totalDistanceKm.toFixed(2)}公里，总成本：${totalCost.toFixed(2)}`);
});

完整修改后的代码 #

import React from 'react';
import './App.css';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import MapboxDirections from '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions';
import '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.css'

mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_KEY

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      totalDistanceKm: 0
    };
  }

  componentDidMount() {
    this.handleDirections()
  }

  handleDirections() {
    const map = new mapboxgl.Map({
      container: this.mapWrapper,
      style: 'mapbox://styles/mapbox/streets-v10',
      center: [-73.985664, 40.748514],
      zoom: 12
    })

    const directions = new MapboxDirections({
      accessToken: mapboxgl.accessToken,
      unit: 'metric',
      profile: 'mapbox/driving',
      annotations: 'distance'
    })

    // 监听route事件获取里程数据
    directions.on('route', (e) => {
      if (e.route.length > 0) {
        const totalDistanceMeters = e.route[0].distance;
        const totalDistanceKm = totalDistanceMeters / 1000;
        this.setState({ totalDistanceKm });
        
        // 示例：计算总成本
        const costPerKm = 0.5; // 假设每公里0.5元
        const totalCost = totalDistanceKm * costPerKm;
        console.log(`总里程：${totalDistanceKm.toFixed(2)}公里，总成本：${totalCost.toFixed(2)}元`);
      }
    });

    map.addControl(directions, 'top-left');
  }

  render() {
    return (
      <div>
        <div ref={el => (this.mapWrapper = el)} className='mapWrapper' />
        {/* 可以在页面上显示里程和成本 */}
        <div className="cost-info">
          <p>总里程：{this.state.totalDistanceKm.toFixed(2)} 公里</p>
          <p>总成本：{(this.state.totalDistanceKm * 0.5).toFixed(2)} 元</p>
        </div>
      </div>
    )
  }
}

export default App;

补充说明 #

• e.route是一个数组，包含所有备选路线，通常我们取第一条（e.route[0]）即可；
• distance字段的单位是米（因为你设置了unit: 'metric'），所以要除以1000转换成公里；
• 如果你需要更详细的分段距离（比如每一段路的距离），可以查看e.route[0].legs[0].steps里的distance字段，每个step对应一段路线的距离；
• 当用户修改起点或终点时，route事件会重新触发，state也会自动更新，页面上的里程和成本也会跟着变化。

这样你就能轻松获取到里程数据，进而计算每公里成本啦！

内容的提问来源于stack exchange，提问作者Guerreri88