、创建基本地图
<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);