React使用百度地图实现驾车路线规划

1、创建基本地图

<Map 
    center={{ lng, lat }} 
    zoom="11" 
    style={{ height: '39vh'}} enableScrollWheelZoom ref={this.mapRef}
>
               
</Map>

2、实现驾车规划

const driving = new BMapGL.DrivingRoute(this?.mapRef?.current?.map, {
    renderOptions:{map: this?.mapRef?.current?.map, autoViewport: true}       
    });
driving.search(start, end);

3、计算驾车时间和距离

const driving = new BMapGL.DrivingRoute(this?.mapRef?.current?.map, {
      renderOptions:{map: this?.mapRef?.current?.map, autoViewport: true},
      onSearchComplete: (results: any) => {
        if (driving.getStatus() != BMAP_STATUS_SUCCESS){
            return ;
         }
          const plan = results.getPlan(0);
          this.setState({
            planTime: plan.getDuration(true), //获取时间
            planDistance: plan.getDistance(true) //获取距离
          })
      });
driving.search(start, end);

1、创建基本地图

<Map 
    center={{ lng, lat }} 
    zoom="11" 
    style={{ height: '39vh'}} enableScrollWheelZoom ref={this.mapRef}
>
               
</Map>

2、实现驾车规划

const driving = new BMapGL.DrivingRoute(this?.mapRef?.current?.map, {
    renderOptions:{map: this?.mapRef?.current?.map, autoViewport: true}       
    });
driving.search(start, end);

3、计算驾车时间和距离

const driving = new BMapGL.DrivingRoute(this?.mapRef?.current?.map, {
      renderOptions:{map: this?.mapRef?.current?.map, autoViewport: true},
      onSearchComplete: (results: any) => {
        if (driving.getStatus() != BMAP_STATUS_SUCCESS){
            return ;
         }
          const plan = results.getPlan(0);
          this.setState({
            planTime: plan.getDuration(true), //获取时间
            planDistance: plan.getDistance(true) //获取距离
          })
      });
driving.search(start, end);

4、修改起点和终点图标

const driving = new BMapGL.DrivingRoute(this?.mapRef?.current?.map, {
     renderOptions:{map: this?.mapRef?.current?.map, autoViewport: true},
     onMarkersSet: (result: any) => {
          const startIcon = new BMapGL.Icon(carPng, new BMapGL.Size(69.6, 40));
          const endIcon = new BMapGL.Icon(hospitalPng, new BMapGL.Size(85, 59));
          result[0].marker.setIcon(startIcon);
          result[0].marker.setTitle(current?.vidId ?? '起点');
          result[result.length - 1].marker.setIcon(endIcon);
          result[result.length - 1].marker.setTitle(current?.orgName ?? '终点');
        }
     });
 driving.search(start, end);

  查看全文

首次访问，人机识别

扫描下方二维码回复 程序员 获取解锁验证码

步骤：[ 打开微信 ]->[ 扫描上方二维码 ]->[ 关注 程序进阶之路 的公众号] 输入 程序员 获取验证码，即可解锁文章。

验证码：

确定