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

第三步在頁(yè)面中引入地圖組件

<div class="map"><div id="app"></div></div>data() {return {path: [new TMap.LatLng(39.984039, 116.30763),//起點(diǎn)new TMap.LatLng(39.982266575222155, 116.30596876144409),new TMap.LatLng(39.977263, 116.337063),//終點(diǎn)],a1: 39.984039,a2: 116.30763,b1: 39.977263,b2: 116.337063,};},methods:{TencentMap() {var center = new TMap.LatLng(39.980619, 116.321277); //自己的定位緯度 經(jīng)度window.map = new TMap.Map('app', {center: center, // 地圖的中心地理坐標(biāo)。zoom: 13, // 地地圖縮放disableDefaultUI: true,});//WebServiceAPI請(qǐng)求URL（駕車路線規(guī)劃默認(rèn)會(huì)參考實(shí)時(shí)路況進(jìn)行計(jì)算）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`;//發(fā)起JSONP請(qǐng)求，獲取路線規(guī)劃結(jié)果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);},}

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。