yyj's blog

使用地图API时，驾车导航的起点终点或是途径点一般是自己选择。下面就是手动绘制点实现驾车导航的一点分享（框架用的react，这个不影响）：

先上的成果图：

先是根据定位创建Map实例：

let map =newBMap.Map("patrolAllMap");  
map.centerAndZoom(newBMap.Point(116.331398,39.897445),17);
let myCity =newBMap.LocalCity();
let cityName ="";
myCity.get((result)=>{
    cityName =result.name;
    map.setCenter(cityName);
});
map.setCenter(cityName);
map.enableScrollWheelZoom(true);
map_global = map;   // 保存变量到全局

然后实例化鼠标绘制工具：

let drawingManager = new BMapLib.DrawingManager(map, {
    isOpen: false, //是否开启绘制模式
    enableDrawingTool: true, //是否显示工具栏
    drawingToolOptions: {
        anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
        offset: new BMap.Size(5, 5), //偏离值
    }
});

如果有不需要的工具，可以找类名，然后在css里面进行隐藏：

.BMapLib_Drawing .BMapLib_circle{
    display: none;
}

我把后面几个常用的定义成了全局：

let map_global;         // 地图实例
let overlays = [];      // 绘制的覆盖物集合

接下来添加鼠标绘制工具监听事件，用于获取绘制结果

drawingManager.addEventListener('overlaycomplete', overlaycomplete);

overlaycomplete记得在drawingManager前面定义，它是绘制覆盖物（点线面等）后触发，如下：

let overlaycomplete = (e) => {
    if(overlays.length<12){
        // 添加绘制的覆盖物
        overlays.push(e.overlay);
        // 添加监听和弹框
        e.overlay.addEventListener("click", function () {
            let geoc = new BMap.Geocoder();
            let point = new BMap.Point(e.overlay.point.lng, e.overlay.point.lat);
            // 地址解析
            geoc.getLocation(point, function (rs) {
                openInfo(e.overlay.point.lng, e.overlay.point.lat, rs.address)
            });
        });
    } else{
        message.error("途经点最多设置十个！")
    }
};

由于途经点最多十个，加上起点终点十二个，所以我这里做了限制。顺便给每个点加上了事件监听，通过地址解析后看到具体点的地址名。监听事件如下：

// 窗口配置
const opts = {    
    width : 250,     // 信息窗口宽度    
    height: 70,     // 信息窗口高度    
    title : "地址:"  // 信息窗口标题   
} 
// 打开信息窗口
function openInfo(lng, lat , address){
    let point = new BMap.Point(lng, lat);
    let infoWindow = new BMap.InfoWindow(address,opts);  // 创建信息窗口对象 
    map_global.openInfoWindow(infoWindow, point); //开启信息窗口
}

点绘制完成后，最后就是生成导航路线了，方法如下：

setLine () {
    let point = [];
    overlays.map((val, ind) => {
        point.push(new BMap.Point(val.point.lng, val.point.lat));
    })
    let waypoints = [...point];
    waypoints = waypoints.splice(1, waypoints.length - 2);
    map_global.clearOverlays();         // 清除旧路线
    let driving = new BMap.WalkingRoute(map_global, { renderOptions: { map: map_global, autoViewport: true } });
    driving.search(point[0], point[point.length - 1], { waypoints: waypoints });    //waypoints表示途经点
}

最后补充地点搜索和清除绘制的方法：

// 清除所有绘制
clearAll() {
    for(var i = 0; i < overlays.length; i++){
        map_global.removeOverlay(overlays[i]);
    }
    overlays.length = 0;           // 清除点
    map_global.clearOverlays();    // 清除路线
}

// 地点搜索
onSearch (value) {
    let local = new BMap.LocalSearch(map_global, {     
        renderOptions:{map: map_global}     
    });
    local.search(value);
}

还可以根据需求，每次绘制完自动生成路线（这个稍微麻烦点，不是必要可以不考虑）。保存绘制数据时，其实就是处理overlays。

手动绘制点来实现驾车导航