【百度地圖】製作多途經點的線路導航,模擬運動 (vue,typescript)
阿新 • • 發佈：2018-12-13
網上有從起點到終點的模擬線路和運動，途經點的比較少。 結合網上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); // 途經點1 const wayP2 = new BMap.Point(112.86182, 28.316074); // 途經點2 const 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); }