由于vue-amap不支持路線規劃，因此不予采納。
效果如圖

在index.html的header中引入

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=e72a9f0cac3b081df05259299454cf1a"></script><!--引入UI組件庫（1.0版本） --> <script type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

配置webpack
在build\webpack.base.conf.js 中，找到module.exports， 添加如下代碼，記得重啟項目！！！！

externals: {AMap: 'AMap',AMapUI: 'AMapUI' },

繪制地圖并規劃路線（關鍵代碼）

用來放地圖

<div class="page" id="map-container"></div>

用來放路線規劃

<div id="panel"></div>

初始化

this.map = new AMap.Map("map-container", {resizeEnable: true,center: [108.9470386505, 34.2593889736], // 地圖中心點zoom: 16, // 地圖顯示的縮放級別 });

公交路線查詢

new AMap.Transfer({map: this.map,panel: "panel",}).search([{ keyword: "寧波大學", city: "寧波" },{ keyword: "寧波老外灘", city: "寧波" },],function (status, data) {console.log(data);});

完整代碼（精簡版）

<template><div class="map-content"><div class="page" id="map-container"></div><div id="panel"></div></div> </template> <script> import AMap from "AMap"; import AMapUI from "AMapUI"; export default {name: "Amap",data() {return {map: null,};},mounted() {// 地圖初始化this.map = new AMap.Map("map-container", {resizeEnable: true,center: [108.9470386505, 34.2593889736], // 地圖中心點zoom: 16, // 地圖顯示的縮放級別});// 'AMap.ToolBar'集成了縮放、平移、定位等功能,'AMap.Scale'展示地圖在當前層級和緯度下的比例尺// 添加需要操作的類AMap.Transfer(公交換乘[不包含地鐵]),AMap.Geolocation(瀏覽器精準定位)// 公交站點查詢AMap.plugin(["AMap.ToolBar","AMap.Scale","AMap.Transfer","AMap.Geolocation","AMap.StationSearch",],() => {this.map.addControl(new AMap.ToolBar());this.map.addControl(new AMap.Scale());this.map.addControl(new AMap.Transfer());this.map.addControl(new AMap.Geolocation());this.map.addControl(new AMap.StationSearch());});this.getRoute(); // 獲取線路規劃},methods: {// 1.路線規劃，不乘坐地鐵2.自行車出行（暫時不做）3.最快捷模式（綜合出行[包含地鐵]），用1,2,3來區分出行方式（goMethod）// 路線規劃文檔地址https://lbs.amap.com/api/javascript-api/reference/route-search#m_TransferPolicygetRoute() {new AMap.Transfer({map: this.map,panel: "panel",}).search([{ keyword: "寧波大學", city: "寧波" },{ keyword: "寧波老外灘", city: "寧波" },],function (status, data) {console.log(data);});},}, }; </script> <style scoped> .page {height: calc(100vh - 50px); } .map-content {position: relative; } #panel {position: absolute;top: 0;right: 0; } </style>

完整代碼（定位、公交站點搜索、路線規劃）

<template><div class="map-content"><div class="page" id="map-container"></div><div id="routeInfo"></div></div> </template> <script> import AMap from "AMap"; import AMapUI from "AMapUI"; export default {name: "Amap",components: { AMap, AMapUI },data() {return {map: null,transOptions: {},routeListData: [],stationListData: [],};},props: {sartAndEnd: Array, // 線路導乘起終點經緯度},mounted() {// 地圖初始化this.map = new AMap.Map("map-container", {resizeEnable: true,center: [108.9470386505, 34.2593889736], // 地圖中心點zoom: 16, // 地圖顯示的縮放級別});// 'AMap.ToolBar'集成了縮放、平移、定位等功能,'AMap.Scale'展示地圖在當前層級和緯度下的比例尺// 添加需要操作的類AMap.Transfer(公交換乘[不包含地鐵]),AMap.Geolocation(瀏覽器精準定位)// 公交站點查詢AMap.plugin(["AMap.ToolBar","AMap.Scale","AMap.Transfer","AMap.Geolocation","AMap.StationSearch",],() => {this.map.addControl(new AMap.ToolBar());this.map.addControl(new AMap.Scale());this.map.addControl(new AMap.Transfer());this.map.addControl(new AMap.Geolocation());this.map.addControl(new AMap.StationSearch());});this.getRoute(); // 獲取線路規劃this.getLocation(); // 獲取我的位置this.getBusStation(); // 站點查詢},methods: {// 1.路線規劃，不乘坐地鐵2.自行車出行（暫時不做）3.最快捷模式（綜合出行[包含地鐵]），用1,2,3來區分出行方式（goMethod）// 路線規劃文檔地址https://lbs.amap.com/api/javascript-api/reference/route-search#m_TransferPolicygetRoute(params) {params = 1;if (params === 1) {// map：AMap.Map對象, 展現結果的地圖實例 panel：結果列表的HTML容器id或容器元素 nightflag：是否計算夜班車 policy：公交換乘策略this.transOptions = {map: this.map,city: "西安",panel: "routeInfo",nightflag: true,policy: AMap.TransferPolicy.NO_SUBWAY,};} else if (params === 2) {this.transOptions = {map: this.map,city: "西安",panel: "routeInfo",nightflag: true,policy: AMap.TransferPolicy.NO_SUBWAY,};} else if (params === 3) {this.transOptions = {map: this.map,city: "西安",panel: "routeInfo",nightflag: true,policy: AMap.TransferPolicy.LEAST_TIME,};}// 構造公交換乘類var transfer = new AMap.Transfer(this.transOptions);// 一：// 根據起、終點坐標查詢公交換乘路線,使用父組件傳入的起終點經緯度// transfer.search(new AMap.LngLat(108.9342500000, 34.2305300000), new AMap.LngLat(108.9470386505, 34.2593889736), function (status, result) {// // result即是對應的公交路線數據信息// if (status === 'complete') {// // 出行計劃按照時間順序排序// const route = result.plans.sort(function (a, b) { return a.time - b.time })// this.routeListData = route// console.log(this.routeListData)// // console.log(this.routeListData)// } else {// console.log('公交路線數據查詢失敗' + result)// }// })// 二：// 根據起、終點坐標查詢公交換乘路線,使用父組件傳入的起終點經緯度transfer.search(new AMap.LngLat(108.93425, 34.23053),new AMap.LngLat(108.9470386505, 34.2593889736));AMap.event.addListener(transfer, "complete", (res) => {// res即是對應的公交路線數據信息// res為獲取到的當前位置的信息console.log(res);// 出行計劃按照時間順序排序const route = res.plans.sort(function (a, b) {return a.time - b.time;});this.routeListData = route;console.log(this.routeListData);}); // 返回出行方式信息AMap.event.addListener(transfer, "error", (err) => {console.log(err);}); // 返回出行方式信息出錯信息},// 獲取當前位置getLocation() {// 定義定位獲取當前位置var geolocation = new AMap.Geolocation({enableHighAccuracy: true, // 是否使用高精度定位，默認:truetimeout: 100000, // 超過100秒后停止定位，默認：無窮大maximumAge: 0, // 定位結果緩存0毫秒，默認：0convert: true, // 自動偏移坐標，偏移后的坐標為高德坐標，默認：trueshowButton: false, // 顯示定位按鈕，默認：true// buttonPosition: 'LB', //定位按鈕停靠位置，默認：'LB'，左下角buttonOffset: new AMap.Pixel(10, 20), // 定位按鈕與設置的停靠位置的偏移量，默認：Pixel(10, 20)showMarker: false, // 定位成功后在定位到的位置顯示點標記，默認：trueshowCircle: false, // 定位成功后用圓圈表示定位精度范圍，默認：truepanToLocation: true, // 定位成功后將定位到的位置作為地圖中心點，默認：truezoomToAccuracy: true, // 定位成功后調整地圖視野范圍使定位位置及精度范圍視野內可見，默認：false});// 一定要add添加// this.map.addControl(geolocation)geolocation.getCurrentPosition(); // 獲取用戶當前的精確位置信息當回調函數中的status為complete的時候表示定位成功AMap.event.addListener(geolocation, "complete", (res) => {// res為獲取到的當前位置的信息console.log(res);}); // 返回定位信息AMap.event.addListener(geolocation, "error", (err) => {console.log(err);}); // 返回定位出錯信息},// 獲取站點信息列表,使用父組件傳入輸入框的值getBusStation() {this.stationSearch = {pageIndex: 1, // 頁碼pageSize: 30, // 單頁顯示結果條數city: "029", // 確定搜索城市};var stationList = new AMap.StationSearch(this.stationSearch);// 一：// stationList.search('小', function (status, result) {// // result即是對應的公交站點數據信息// if (status === 'complete' && result.info === 'OK') {// console.log(result)// console.log(this.stationListData)// } else {// console.log('公交路線數據查詢失敗' + result)// }// })// 二：stationList.search("西安鐘樓"); // mock一個假數據AMap.event.addListener(stationList, "complete", (res) => {// res為獲取到的當前位置的信息this.stationListData = res;console.log(this.stationListData);}); // 返回定位信息AMap.event.addListener(stationList, "error", (err) => {console.log(err);}); // 返回定位出錯信息},}, }; </script> <style scoped> .page {height: calc(100vh - 50px); } .map-content {position: relative; } #routeInfo {position: absolute;top: 0;right: 0; } </style>

總結

以上是生活随笔為你收集整理的vue 引入高德地图 路线规划的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。