第一步在index.html引入鏈接

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY"></script>

第二步在main.js 全局引入

window.display_polyline = function (pl) {//創建 MultiPolyline顯示折線var polylineLayer = new TMap.MultiPolyline({id: 'polyline-layer', //圖層唯一標識map: map, //繪制到目標地圖//折線樣式定義styles: {style_blue: new TMap.PolylineStyle({color: '#3777FF', //線填充色width: 6, //折線寬度borderWidth: 5, //邊線寬度borderColor: '#FFF', //邊線顏色lineCap: 'round', //線端頭方式}),},//折線數據定義geometries: [{id: 'pl_1', //折線唯一標識，刪除時使用styleId: 'style_blue', //綁定樣式名paths: pl,},],}); };window.cb = function (ret) {//從結果中取出路線坐標串var coors = ret.result.routes[0].polyline,pl = [];//坐標解壓（返回的點串坐標，通過前向差分進行壓縮，因此需要解壓）var kr = 1000000;for (var i = 2; i < coors.length; i++) {coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;}//將解壓后的坐標生成LatLng數組for (var i = 0; i < coors.length; i += 2) {pl.push(new TMap.LatLng(coors[i], coors[i + 1]));}window.display_polyline(pl); //顯示路線 };

第三步在頁面中引入地圖組件

<div class="map"><div id="app"></div></div>data() {return {path: [new TMap.LatLng(39.984039, 116.30763),//起點new TMap.LatLng(39.982266575222155, 116.30596876144409),new TMap.LatLng(39.977263, 116.337063),//終點],a1: 39.984039,a2: 116.30763,b1: 39.977263,b2: 116.337063,};},methods:{TencentMap() {var center = new TMap.LatLng(39.980619, 116.321277); //自己的定位緯度 經度window.map = new TMap.Map('app', {center: center, // 地圖的中心地理坐標。zoom: 13, // 地地圖縮放disableDefaultUI: true,});//WebServiceAPI請求URL（駕車路線規劃默認會參考實時路況進行計算）var url = `https://apis.map.qq.com/ws/direction/v1/driving/?from=${this.a1},${this.a2}&to=${this.b1},${this.b2}&output=jsonp&callback=cb&key=你自己的Key`;//發起JSONP請求，獲取路線規劃結果this.jsonp_request(url);var marker = new TMap.MultiMarker({id: 'marker-layer',map: map,styles: {start: new TMap.MarkerStyle({width: 25,height: 35,anchor: { x: 16, y: 32 },src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png',}),end: new TMap.MarkerStyle({width: 25,height: 35,anchor: { x: 16, y: 32 },src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png',}),},geometries: [{id: 'start',styleId: 'start',position: new TMap.LatLng(this.a1, this.a2),},{id: 'end',styleId: 'end',position: new TMap.LatLng(this.b1, this.b2),},],});},jsonp_request(url) {var script = document.createElement('script');script.src = url;document.body.appendChild(script);},}

總結

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

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