江苏龙网

  1. 主页 > 生活百科 > >

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

react

、创建基本地图
<Mapcenter={{ 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);【React使用百度地图实现驾车路线规划】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);



    推荐阅读


    上一篇：红茶茶厂,云南红茶可以存放吗

    下一篇：旧照片褪色了能修复吗？这个技巧可以修复褪色的老照片！