‘百度地图如何制作出行路线’百度地图制作路书!

之前在工作中实现了一个小的功能模块是调用百度地图的接口，实现初始化位置点和路线以及自己添加位置点和路线的功能，现在记录一下，方便自己以后来回顾知识。此demo主要实现了以下功能：

在地图上添加位置点，并添加位置点的名称备注，右键停止添加位置点，添加点之后在左侧有一个位置点的列表，当点击列表中的点时，地图会将中心点移动到该点，并在点上显示标签为该位置点的名称备注。
在地图上可以添加一条路线，完成路线时右键停止，然后点击保存路线会弹出该线上所有折点的位置点所构成的字符串，点击编辑路线，路线就开启编辑功能，可以修改路线。

下面是添加点的效果图

添加路线时的效果图

以下是JS部分源码

var map; var myVue; var addpoint = false; //添加点的判断 var addline = false; //添加线的判断 $(function () { initMap(); myVue = new Vue({ el:'#app', data:{ action:'', points:[], // 点的集合 linepoints:[], //路线上的点的集合 mouseMarker:'', //跟随鼠标移动的marker点 mouseMarkerTitle:'', //鼠标移动时显示的label lines:[], //线的集合 mouseLine:{} , //跟随鼠标移动时的虚拟线 initLine:null, //初始化时的线 myIcon: '', tmpLabel:'', editLine:'', //可编辑的路线 dialogVisible:false, //控制信息框的显示与隐藏 lineInfo:'', //路线上的折点组成的字符串 lng,lat；lng,lat... }, methods:{ //菜单项位置点点击事件 pointClick:function () { (); = "point"; map.disableDoubleClickZoom(); map.addEventListener('rightclick',myVue.clear); map.addEventListener('mousemove',myVue.mouseMove); map.addEventListener('click',myVue.addpoint); }, //菜单项线点击事件 lineClick:function () { myVue.clear(); = "line"; map.addEventListener('click',) map.addEventListener('rightclick',myVue.clear); map.addEventListener('mousemove',myVue.mouseMove); }, save:function () { if !=""){ (); = (); } const {linepoints} = this; = ""; for(let i=0;i<line;i++){ += linepoints[i].lat+','+linepoints[i].lng+';'; } = true; (); }, lineEditClick:function () { const lines = ; for (let i=0;i<lines.length;i++){ map.removeOverlay(lines[i]); } = []; const editline = new BMap.Polyline,{strokeColor: '#00F0f0',strokeWeight:5,strokrOpacity:1}); map.addOverlay(editline); = editline; edi(); }, lineDelClick:function () { const lines = ; for (let i=0;i<lines.length;i++){ map.removeOverlay(lines[i]); } = []; = []; }, clear:function () { map.removeEventListener('mousemove',myVue.mouseMove); map.removeEventListener('click',myVue.addpoint); map.removeEventListener('click',myVue.addLine); map.removeEventListener('rightclick',myVue.clear); map.removeOverlay); = ""; = ''; if !=""){ map.removeOverlay); = ""; } }, handleClose(done) { this.$confirm('确认关闭？') .then(_ => { done(); }) .catch(_ => {}); }, mouseMove:function (e) { (1); if (=='point'){ myVue.showMousePoint(e); }else if(=='line'){ myVue.showMouseLine(e); } }, addpoint:function (e) { if (=='point'){ this.$prompt('请输入位置点名称', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', }).then(({ value }) => { var marker = new BMap.Marker,{icon:}); map.addOverlay(marker); marker.name = value; myVue.(marker); this.$message({ type: 'success', message: '位置点: ' + value+'添加成功', }); }).catch(() => { this.$message({ type: 'info', message: '位置点添加失败' }); }); } }, addLine:function (e) { if(=='line'){ if (.length>0){ const line = new BMap.Polyline([[.length-1],e.point],{strokeColor: '#00F0f0',strokeWeight:5,strokrOpacity:1}); map.addOverlay(line); .push(line); } .push) } }, showMouseLine:function (e) { if (==""){ const mouseMarker = new BMap.Marker,{icon:}); map.addOverlay(mouseMarker); = mouseMarker; }else { .setPosition); } if (.length>0){ const mouseline = new BMap.Polyline([[.length-1],e.point],{strokeColor: '#00F5A9',strokeWeight:5,strokrOpacity:0.3}); map.addOverlay(mouseline); map.removeOverlay); = mouseline; } }, showMousePoint:function (e) { if (==""){ = new BMap.Marker,{icon:}); map.addOverlay(); } .setPosition); }, toCenter:function (i) { if !=''){ map.removeOverlay); myVue.tmpLabel = ''; } map.panTo[i].point); var str = " <div class='point_label'> "+myVue.points[i].name+"</div>"; const label = new BMap.Label(str,{position:myVue.points[i].point}); myVue.tmpLabel = label; map.addOverlay(label); } }, mounted:function () { var myIcon = new BMap.Icon("img;, new BMap.Size(40, 50)) myIcon.setImageSize(new BMap.Size(40,50)); = myIcon; = initPoints(); } }) }) function initPoints(){ var myIcon = new BMap.Icon("img;, new BMap.Size(40, 50)) myIcon.setImageSize(new BMap.Size(40,50)); var marker = []; marker[0] = new BMap.Marker(new BMap.Poin),{icon:myIcon}); marker[0].name = "东方实验学校"; marker[1] = new BMap.Marker(new BMap.Poin),{icon:myIcon}); marker[1].name = "东方星城"; marker[2] = new BMap.Marker(new BMap.Poin),{icon:myIcon}); marker[2].name = "温馨家园"; marker[3] = new BMap.Marker(new BMap.Poin),{icon:myIcon}); marker[3].name = "魏家庄"; marker[4] = new BMap.Marker(new BMap.Poin),{icon:myIcon}); marker[4].name = "流泉新村"; marker[5] = new BMap.Marker(new BMap.Poin),{icon:myIcon}); marker[5].name = "中房翡翠园"; marker[6] = new BMap.Marker(new BMap.Poin),{icon:myIcon}); marker[6].name = "柳泉中学"; marker[7] = new BMap.Marker(new BMap.Poin),{icon:myIcon}); marker[7].name = "金丽大厦"; marker[8] = new BMap.Marker(new BMap.Poin),{icon:myIcon}); marker[8].name = "淄博市公安局"; for (let i=0;i<marker.length;i++){ map.addOverlay(marker[i]); } return marker; } function initMap() { map = new BMap.Map('map'); var center = new BMap.Poin); map.centerAndZoom(center, 15); map.enableScrollWheelZoom(); }

拓展：高德地图接口api

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="jquery-3.4.1.min.js"></script> <script type="text/javascript" src=";key=7f3b04e41812fc230bf64bc4bf0b40e7"></script> <!-- 异步版本 ui组件, 用于添加城市信息 --> <script src=";></script> <!-- <script src=";></script> --> <!-- 移动端开发时, 添加以下内容 --> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> </head> <style> #container { width: 600px; height: 480px; display: inline-block; } #container1 { width: 600px; height: 480px; } #right{ float: left; margin-top: 40px; } </style> <body> <!-- 先在开发者页面创建应用,申请key, 然后使用 --> <!-- 高德教程地址 --> <!-- 选择城市教程 --> <div id="container"> </div> <div id='right'> <div> <div class='title'>选择模式</div> <input type='radio' name='mode' value='dragMap' checked>拖拽地图模式</input> <!-- </br> --> <input type='radio' name='mode' value='dragMarker' checked>拖拽图标模式</input> </div> <div> <button id='start'>开始选点</button> <button id='stop'>关闭选点</button> </div> <div> <div class='title'>选址结果</div> <div class='c'>经纬度:</div> <div id='lnglat'></div> <div class='c'>地址:</div> <div id='address'></div> <div class='c'>最近的路口:</div> <div id='nearestJunction'></div> <div class='c'>最近的路:</div> <div id='nearestRoad'></div> <div class='c'>最近的POI:</div> <div id='nearestPOI'></div> </div> </div> <div id="container1"> </div> <!-- 同步加载 --> <!-- <script type="text/javascript"> var map = new AMap.Map('container', { center: [117.000231, 36.456755], zoom: 11 }) </script> --> <!-- 异步加载,推荐使用, 异步加载指的是为 js API指定加载的回调函数,在 js API 的主体资源加载完毕之后,将自动调用该回调函数. 回调函数应该声明在 JS API入口文件引用之前,异步加载可以减少其对其他脚本执行的阻塞, --> <script type="text/javascript"> // var position = new AMap.LngLat(116, 39);//标准写法 // var position = [116, 39]; //简写, 经纬度不能加引号 // 创建地图 // 如果不传入center坐标, 会默认定位到所在城市,可以使用插件进行自动定位 var map = new AMap.Map('container', { // center: [117.000000, 38.000000], //设置地图中心点坐标 zoom: 14, //级别, 级别与地图尺寸成正比,越大越详细, web最小为3级,高德最大为20 viewMode: '2D', // 设置地图的显示样式 lang: 'zh_cn', //设置地图语言类型 mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式 }); // 加载一个(不使用数组)或多个插件 AMap.plugin(['AMap.ToolBar', 'AMap.Driving', 'AMap.CitySearch', 'Zepto'], function () { var toolbar = new AMap.ToolBar(); //工具条, 地图的缩放,平移 map.addControl(toolbar); // var driving = new AMap.Driving(); // 驾车路线规划 // driving.search("参数") // ip定位 var citySearch = new AMAP.citySearch() ci(function (status, result) { if (status === 'complete' && re === 'OK') { // 查询成功, result为当前所在城市信息 // re 为当前所在经纬度, 113.315606,34.536169 if (result && re && re) { var cityinfo = re; var citybounds = re; // document.getElementById('info').innerHTML = '您当前所在城市：' + re; //地图显示当前城市 map.setBounds(citybounds); } } else { // document.getElementById('info').innerHTML = re; } }); }); // 加载ui模块, 可以地图选点 // 'control/BasicControl' 多个地图图层的组件 // misc/PositionPicker 选坐标的组件 AMa(['misc/PositionPicker', 'control/BasicControl'], function (PositionPicker) { // 如果使用ui组件, map 则在ui组件里定义即可 var map = new AMap.Map('container', { zoom: 16, scrollWheel: false }) var positionPicker = new PositionPicker({ mode: 'dragMarker', map: map, iconStyle: { //自定义外观 url: ';, ancher: [24, 40], size: [48, 48] } }); ('success', function (positionResult) { document.getElementById('lnglat').innerHTML = ; document.getElementById('address').innerHTML = ; document.getElementById('nearestJunction').innerHTML = ; document.getElementById('nearestRoad').innerHTML = ; document.getElementById('nearestPOI').innerHTML = ; }); ('fail', function (positionResult) { document.getElementById('lnglat').innerHTML = ' '; document.getElementById('address').innerHTML = ' '; document.getElementById('nearestJunction').innerHTML = ' '; document.getElementById('nearestRoad').innerHTML = ' '; document.getElementById('nearestPOI').innerHTML = ' '; }); var onModeChange = function (e) { ) } var startButton = document.getElementById('start'); var stopButton = document.getElementById('stop'); var dragMapMode = document.getElementsByName('mode')[0]; var dragMarkerMode = document.getElementsByName('mode')[1]; AMap.event.addDomListener(startButton, 'click', function () { ().getSouthWest()) }) AMap.event.addDomListener(stopButton, 'click', function () { (); }) AMap.event.addDomListener(dragMapMode, 'change', onModeChange) AMap.event.addDomListener(dragMarkerMode, 'change', onModeChange); (); }) //多个地图图层 AMa(['control/BasicControl'], function (BasicControl) { var layerCtrl1 = new Ba({ position: 'tr' }); var map1 = new AMap.Map('container1', { //这里将layerCtrl中启用的图层传递给map layers: layerC() }); ma(layerCtrl1); var layerCtrl2 = new Ba({ theme: 'dark', //自定义基础图层 baseLayers: [{ enable: true, //默认显示 id: 'tile', name: '标准图', layer: new AMap.TileLayer() }, { id: 'satellite', name: '卫星图', layer: new AMap.TileLayer.Satellite() }], //自定义覆盖图层 overlayLayers: [{ enable: true, id: 'traffic', name: '路况图', layer: new AMap.TileLayer.Traffic() }, { id: 'roadNet', name: '路网图', layer: new AMap.TileLayer.RoadNet() }] }); var map2 = new AMap.Map('container1', { //这里将layerCtrl中启用的图层传递给map layers: layerC() }); ma(layerCtrl2); }); map.on('complete', function () { // 地图加载完成后触发complete事件 }) // map.destroy(); // 销毁地图,并清空地图容器 </script> <script type="text/javascript" src=";key=7f3b04e41812fc230bf64bc4bf0b40e7"></script> <!-- 或者 --> <!-- <script> window.onLoad = function(){ var map = new AMap.Map("container"); } var url = ';key=7f3b04e41812fc230bf64bc4bf0b40e7' var jsapi = document.createElement('script'); j = 'utf-8'; j = url; document.(jsapi); </script> --> </body> </html>

两者的区别

1、对于使用者的主要区别：

高德注重导航的功能，

1、有很多路连名字都没有，但是高德依旧可以标记出来

用于骑行、徒步等低速运动，需要更详细地显示细节，高德地图则好于百度

2、高德语音提示比较全面，导航只听语音的话

百度注重生活的功能

1、实景功能三维效果逼真，方便用户能够精准的找出目的位置

2、商家服务对查找商家等

路线的优选

高德会给出路程最短的（省油，适合长图）

百度则有更多的考虑，包括避开拥堵路段（省时，适合城市里）

2、对开发者的主要区别：

百度地图：

网页版地图平台更好（Android、IOS、WEB）。

支持全景API

POI数据很丰富

缺点：api文档（烂的一批）

高德地图：

开发者人群的支持面更高，

平台适用性更好（Android、IOS、windows phone、Win8、web）。

责任编辑: 鲁达

“百度地图如何制作出行路线,百度地图制作路书,百度地图规划路线,百度地图地铁路线,百度地图如何组队出行,百度地图如何看出行记录”边界阅读