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

1、创建基本地图

1
2
3
4
5
6
7
<Map 
center={{ lng, lat }}
zoom="11"
style={{ height: '39vh'}} enableScrollWheelZoom ref={this.mapRef}
>

</Map>

2、实现驾车规划

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

3、计算驾车时间和距离

1
2
3
4
5
6
7
8
9
10
11
12
13
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、修改起点和终点图标

1
2
3
4
5
6
7
8
9
10
11
12
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);

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

https://www.sgknight.cn/2022/06/15/react-using-baidu-map-drive-path/

作者

knight

发布于

2022-06-15

更新于

2022-06-15

许可协议

评论