API：百度地图 官网：[http://lbsyun.baidu.com/](http://lbsyun.baidu.com/) <br> 使用地图API时，驾车导航的起点终点或是途径点一般是自己选择。下面就是手动绘制点实现驾车导航的一点分享（框架用的react，这个不影响）： <br> 先上的成果图：  <br> 先是根据定位创建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。