高德地图驾车导航避让点位

高德地图驾车导航避让点位_第1张图片

封路图标的位置就是避让路段

首先我们在 data 里声明一个 drivingnull this.driving 去接收轨迹 便于下次渲染轨迹时将其清除

避让的话我调用的是 setAvoidPolygons() 这个方法  他的参数是个二维数组

长这样

// [避让区域, 避让区域, ...]
// 每个避让区域 = [[lng, lat], [lng, lat], [lng, lat], ...]  这里至少三个点位 否则会避让失败
if (this.driving != null) {
    this.driving.clear()// 判断清除上一个路线规划
}
this.isShow = false
this.map.plugin(["AMap.Driving"], () => { //加载驾车服务插件
    var TruckDrivingOptions = {
        map: this.map,
        size: 1,
        autoFitView: true,
    };
    let arr = []
    if (this.brList.length) {
        this.brList.forEach((item, index) => {
            let bList = [[item.northEastLongitude * 1, item.northEastLatitude * 1], [item.southWestLongitude * 1, item.southWestLatitude * 1], [item.southWestLongitude * 1, item.northEastLatitude * 1]]
            arr.push(bList)
        })
    }
    this.driving = new this.amap.Driving(TruckDrivingOptions);
    this.driving.setAvoidPolygons(arr)
    this.driving.search(new this.amap.LngLat(this.myposition[0], this.myposition[1]), new this.amap.LngLat(item.longitude * 1, item.latitude * 1));
});

是不是很简单

高德 JS API 2.0 示例: 位置经纬度 + 驾车规划路线-驾车路线规划-示例中心-JS API 2.0 示例 | 高德地图API

高德 JS API 2.0: 参考手册-地图 JS API v2.0 | 高德地图API

你可能感兴趣的:(地图,javascript,vue.js,前端)