【百度地图】制作多途经点的线路导航,模拟运动 (vue,typescript)

网上有从起点到终点的模拟线路和运动，途经点的比较少。结合网上demo，再进行了一下修改。

VUE （Typescript），先在index.html里引用

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title>得了么得</title><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的KEY"></script></head><body><noscript><strong>We're sorry but tl_screen doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>

然后声明, typescript里引用图片，需要require，不然会默认是百度的图片地址。

declare const BMap: any;
declare function require(iconUrl: string): string;@Component
export default class MapScreen extends Vue { }

private loadMap() {const that = this;const map = new BMap.Map('baidu-map');map.clearOverlays();map.enableScrollWheelZoom();map.centerAndZoom(new BMap.Point(113.044643, 28.169439), 15);map.setMapStyle({ // 可以自己定义地图底图 http://developer.baidu.com/map/custom/styleJson:[{'featureType': 'water','elementType': 'all','stylers': {'color': '#021019'},},{'featureType': 'highway','elementType': 'geometry.fill','stylers': {'color': '#000000',},},{'featureType': 'highway','elementType': 'geometry.stroke','stylers': {'color': '#147a92',},},{'featureType': 'arterial','elementType': 'geometry.fill','stylers': {'color': '#000000',},},{'featureType': 'arterial','elementType': 'geometry.stroke','stylers': {'color': '#0b3d51',},},{'featureType': 'local','elementType': 'geometry','stylers': {'color': '#000000',},},{'featureType': 'land','elementType': 'all','stylers': {'color': '#08304b',},},{'featureType': 'railway','elementType': 'geometry.fill','stylers': {'color': '#000000',},},{'featureType': 'railway','elementType': 'geometry.stroke','stylers': {'color': '#08304b',},},{'featureType': 'subway','elementType': 'geometry','stylers': {'lightness': -70,},},{'featureType': 'building','elementType': 'geometry.fill','stylers': {'color': '#000000',},},{'featureType': 'all','elementType': 'labels.text.fill','stylers': {'color': '#857f7f',},},{'featureType': 'all','elementType': 'labels.text.stroke','stylers': {'color': '#000000',},},{'featureType': 'building','elementType': 'geometry','stylers': {'color': '#022338',},},{'featureType': 'green','elementType': 'geometry','stylers': {'color': '#062032',},},{'featureType': 'boundary','elementType': 'all','stylers': {'color': '#1e1c1c',},},{'featureType': 'manmade','elementType': 'geometry','stylers': {'color': '#022338',},},{'featureType': 'poi','elementType': 'all','stylers': {'visibility': 'off',},},{'featureType': 'all','elementType': 'labels.icon','stylers': {'visibility': 'off',},},{'featureType': 'all','elementType': 'geometry.fill','stylers': {'color': '#08124fff','hue': '#02061d','lightness': 1,'visibility': 'on',},},],});const startPoint = new BMap.Point(113.044643, 28.169439);    // 起点const endPoint = new BMap.Point(112.545041, 28.285542);    // 终点const wayP1 = new BMap.Point(112.79513, 28.037395);    // 途经点1const wayP2 = new BMap.Point(112.86182, 28.316074);    // 途经点2const myIcon = new BMap.Icon( require('../assets/images/car.png'), new BMap.Size(40, 60), {    // 小车图片imageSize: new BMap.Size(35, 35),imageOffset: new BMap.Size(0, 0),    // 图片的偏移量。为了是图片底部中心对准坐标点。});const startIcon = new BMap.Icon( require('../assets/images/start.png'), new BMap.Size(30, 30));const endIcon = new BMap.Icon( require('../assets/images/end.png'), new BMap.Size(30, 30));const wayIcon = new BMap.Icon( require('../assets/images/way.png'), new BMap.Size(30, 30));const wayPointIconHtml = `<div style='position:absolute; margin:0px; padding: 0px; width: 36px;height: 40px; overflow: hidden;'><img src=''style='display: none; border:none;margin-left:-11px; margin-top:-35px; '/></div>`;const driving2 = new BMap.DrivingRoute(map, {renderOptions: { map, autoViewport: true},onMarkersSet: (res: any) => {    // 标注点完成回调const startMarker = new BMap.Marker(startPoint, {icon: startIcon});map.removeOverlay(res[0].marker); // 删除起点map.addOverlay(startMarker);const endMarker = new BMap.Marker(endPoint, {icon: endIcon});map.removeOverlay(res[3].marker); // 删除起点map.addOverlay(endMarker);const warMarker1 = new BMap.Marker(wayP1, {icon: wayIcon});res[1].Nm.Bc.innerHTML = wayPointIconHtml; // 删除途经点map.addOverlay(warMarker1);const warMarker2 = new BMap.Marker(wayP2, {icon: wayIcon});res[2].Nm.Bc.innerHTML = wayPointIconHtml; // 删除途经点map.addOverlay(warMarker2);},});    // 驾车实例driving2.search(startPoint, endPoint, {waypoints: [wayP1, wayP2]});    // 显示一条公交线路let positionOne: any = [];let positionTwo: any = [];let positionThree: any = [];function run() {const driving = new BMap.DrivingRoute(map);driving.search(startPoint, endPoint, {waypoints: [wayP1, wayP2]});const drivingOne = new BMap.DrivingRoute(map);    // 驾车实例drivingOne.search(startPoint, wayP1);drivingOne.setSearchCompleteCallback( () => {positionOne = drivingOne.getResults().getPlan(0).getRoute(0).getPath(); // 通过驾车实例，获得一系列点的数组});const drivingTwo = new BMap.DrivingRoute(map);    // 驾车实例drivingTwo.search(wayP1, wayP2);drivingTwo.setSearchCompleteCallback( () => {positionTwo = drivingTwo.getResults().getPlan(0).getRoute(0).getPath();});const drivingThree = new BMap.DrivingRoute(map);    // 驾车实例drivingThree.search(wayP2, endPoint);drivingThree.setSearchCompleteCallback( () => {positionThree = drivingThree.getResults().getPlan(0).getRoute(0).getPath();});driving.setSearchCompleteCallback( () => {const totalPtS = [...positionOne, ...positionTwo, ...positionThree];const paths = totalPtS.length;    // 获得有几个点const carMk = new BMap.Marker(totalPtS[0], { icon: myIcon});map.addOverlay(carMk);function resetMkPoint(i = 0) {carMk.setPosition(totalPtS[i]);if (i < paths) {setTimeout( () => {i++;resetMkPoint(i);map.setViewport([startPoint, wayP1, wayP2, endPoint]);}, 2000);} else { that.loadMap(); }}setTimeout( () => {resetMkPoint(5);}, 2000);});}setTimeout( () => {run();}, 1500);}

【百度地图】制作多途经点的线路导航,模拟运动 (vue,typescript)相关推荐

【百度地图API】如何制作多途经点的线路导航——驾车篇
摘要: 休假结束,酸奶×××要从重庆驾车去北京.可是途中要去西安奶奶家拿牛奶饼干呢!用百度地图API,能不能帮我实现这个愿望呢? ----------------------------------- ...
【百度地图API】制作多途经点的线路导航——路线坐标规划
一.创建地图大家跟我一起来创建一张简单的地图: var map = new BMap.Map("container"); map.centerAndZoom(new BMap.P ...
【百度地图API】制作多途经点的线路导航
先创建一张地图的容器: <div class="pos-a" id="allmap"style="width: 100%; height: 95 ...
【腾讯地图API】制作多途经点的线路导航——路线坐标规划
面试:你懂什么是分布式系统吗?Redis分布式锁都不会?>>> 最近百度地图转腾讯地图以前用过百度地图实现路线坐标规划,不过搜索了一些没有搜索到腾讯地图的路线坐标规划,于是参数 ...
百度地图API之定位+公交地铁线路导航
背景: 给医院做的一个微信平台,需要用户定位来到达医院目的地. 心情: 一下午困死我了. 一.定位定位示例在这里: http://developer.baidu.com/map/jsdemo.htm ...
如何制作多途经点的线路导航——驾车篇
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
百度地图绘制实时路线以及最短线路规划
如何使用百度地图绘制实时路线以及最短线路规划最近在做百度地图的实时路线绘制,发现一些问题,比如由于定位漂移带来的路线绘制偏差,还有由于定位漂移,导致人未走动时,也会绘制路线等.百度鹰眼的线路纠偏个人 ...
百度步行导航加poi搜索android,【百度地图】带地图显示控件、导航控件、POI查找控件...
标题: [完全开源]百度地图Web service API C#.NET版,带地图显示控件.导航控件.POI查找控件概述: 源代码主要包含三个项目,BMap.NET.BMap.NET.Windows ...
百度地图多途经点的线路导航——驾车篇
摘要: 休假结束,酸奶小妹要从重庆驾车去北京.可是途中要去西安奶奶家拿牛奶饼干呢!用百度地图API,能不能帮我实现这个愿望呢? ------------------------------------ ...

【百度地图】制作多途经点的线路导航,模拟运动 (vue,typescript)

【百度地图】制作多途经点的线路导航,模拟运动 (vue,typescript)相关推荐

最新文章

热门文章