這篇文章主要介紹了Vue使用高德地圖如何搭建實(shí)時(shí)公交應(yīng)用功能,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
專注于為中小企業(yè)提供做網(wǎng)站、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)婺源免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動(dòng)了成百上千企業(yè)的穩(wěn)健成長,幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。最近項(xiàng)目要使用高德地圖寫了一個(gè)實(shí)時(shí)公交的應(yīng)用,這邊分享一個(gè)小應(yīng)用主要熟悉下高德地圖在vue中的使用,常用api,vue的常用指令
先給大家看下頁面效果:
如果有需要源碼的童鞋請(qǐng)移步我的github地址 vue搭建實(shí)時(shí)公交 (歡迎star)
實(shí)現(xiàn)思路
在vue項(xiàng)目中導(dǎo)入高德地圖 具體功能調(diào)用相應(yīng)高德js APi
1.在vue項(xiàng)目中導(dǎo)入高德地圖
1.修改webpac.base.conf.js文件
externals: { 'AMap': 'AMap' }
2.引入sdk 引入有兩種方式,一種是在index頁面直接引入
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申請(qǐng)的key值"></script>
還有一種是異步加載
<script src="http://webapi.amap.com/maps?v=1.3&key=您申請(qǐng)的key值&callback=init"></script> <script> function init(){ var map = new AMap.Map('container', { center: [117.000923, 36.675807], zoom: 6 }); map.plugin(["AMap.ToolBar"], function() { map.addControl(new AMap.ToolBar()); }); } </script>
注意不管是采用哪種方式,都要保證你想要加載地圖的js文件,在引入的sdk之后。這樣,在第三步的時(shí)候,才不會(huì)報(bào)錯(cuò)
3.在當(dāng)前需要加載vue頁面引入
import AMap from 'AMap'
原文鏈接: https://www.jb51.net/article/112413.htm
2.附近站點(diǎn)功能
AMap.service(['AMap.PlaceSearch'], function () { var placeSearch = new AMap.PlaceSearch({ // 構(gòu)造地點(diǎn)查詢類 pageSize: 4, typ: '', pageIndex: 1, city: '蘇州' // 城市 }) // 中心點(diǎn)坐標(biāo) // [currentLocation.lng,currentLocation.lat] // 120.6400961887,31.1411187922 var currentLocation = true if (currentLocation !== undefined) { placeSearch.searchNearBy('公交站點(diǎn)', [120.6400961887, 31.1411187922], 1500, function (status, result) { if (status === 'complete' && result.info === 'OK') { var pois = result.poiList.pois var random = [4, 4, 24, 14] pois.forEach((item, index) => { this.items.push({ site: item.name.substr(0, item.name.indexOf('(')), line: item.address, distance: item.distance, next_site: '', sitenum: random[index], siteId: item.id }) this.lineInfo(item.address.substr(0, item.address.indexOf(';') - 1), item.id, index) }) console.log(result.poiList) } }.bind(this)) } }.bind(this))
這邊主要調(diào)用高德周邊搜索API,構(gòu)造地點(diǎn)查詢類tye 設(shè)為空,采用公交站點(diǎn)為關(guān)鍵字進(jìn)行查詢,這邊中心點(diǎn)坐標(biāo)是寫死的,各位小伙伴可以調(diào)用高德定位api去獲得當(dāng)前坐標(biāo)
3.線路實(shí)時(shí)詳情
AMap.service(['AMap.LineSearch'], function () { var linesearch = new AMap.LineSearch({ pageIndex: 1, city: this.city, pageSize: 20, extensions: 'all' // 返回全部信息 }) linesearch.search(this.lineName, function (status, result) { // 取回公交路線查詢結(jié)果 if (status === 'complete' && result.info === 'OK') { this.lineInfo = result.lineInfo var tips = result.lineInfo[0] console.log(tips) this.from = tips.start_stop + '-' this.to = tips.end_stop this.lineId = tips.id if (tips.stime.length !== 0 && tips.length !== 0) { this.time_s = tips.stime.substr(0, 2) + ':' + tips.stime.substr(2, 2) this.time_e = tips.etime.substr(0, 2) + ':' + tips.etime.substr(2, 2) } else { this.time_s = '05:40' this.time_e = '18:40' } this.pay = tips.basic_price this.listWidth = tips.via_stops.length this.backImage.width = tips.via_stops.length + 'rem' tips.via_stops.forEach((item, index) => { if (item.id === this.siteId) { this.ind = index console.log(index) this.showActive(this.ind, this.siteName) } this.siteList.push({ siteName: item.name, siteLat: item.location.lat, siteLng: item.location.lng }) }) } else { // 無數(shù)據(jù)或者查詢失敗 } // setInterval(busposition(), 60000) }.bind(this)) }.bind(this)) },
這邊調(diào)用公交路線查詢接口,查詢相關(guān)路線詳情,這邊小車車的位置是一個(gè)寫死數(shù)組(實(shí)際情況可以根據(jù)班車GPS坐標(biāo)判斷班車在哪兩個(gè)站點(diǎn)之間),可以點(diǎn)擊相應(yīng)站點(diǎn)顯示最近班車相聚站點(diǎn)數(shù)
4.輸入提示
this.autocomplete.search(this.keywords, function (status, result) { if (status === 'complete' && result.info === 'OK') { var tips = result.tips this.hisTips = [] console.log('tips', tips) for (var i = 0; i < tips.length; i++) { if (tips[i].location !== '' && undefined !== tips[i].location && tips[i].district.substr(0, 6) === '江蘇省蘇州市') { this.hisTips.push({ lng: tips[i].location.lng, lat: tips[i].location.lat, name: tips[i].name, district: tips[i].district }) } } } else { } }.bind(this))
這邊使用指令v-on:input調(diào)用我們輸入提示的方法進(jìn)行列表展示
5.換乘詳情
AMap.service('AMap.Transfer', function () { // 回調(diào)函數(shù) // 實(shí)例化Transfer var transptions = { policy: 0, // 乘車策略,少時(shí)間0 少步行3 最少換乘2 city: '蘇州' // 城市 } this.transfer = new AMap.Transfer(transptions) this.Linesearch() }.bind(this)) this.transfer.search([this.$route.query.fromAddressLng, this.$route.query.fromAddressLat], [this.$route.query.toAddressLng, this.$route.query.toAddressLat], function (status, result) { console.log(status) console.log(result) if (status === 'complete' && result.info === 'OK') { var plans = result.plans console.log('plans', plans) for (var i = 0; i < plans.length; i++) { var cost = plans[i].cost var time = parseInt(plans[i].time / 60) var segments = plans[i].segments var trans = [] if (segments !== '' && segments !== undefined) { for (var j = 0; j < segments.length; j++) { if (segments[j].transit_mode === 'BUS') { const linename = segments[j].instruction trans.push(linename.substr(2, linename.indexOf('(') - 2)) } else if (segments[j].transit_mode === 'SUBWAY') { const linename = segments[j].instruction trans.push(linename.substr(2, linename.indexOf('線') - 2)) } } } this.plan.push({ cost: cost, time: time, trans: trans }) } } else { } }.bind(this))
這里我們調(diào)用transfer.search()
傳入起點(diǎn)和終點(diǎn)坐標(biāo),是通過輸入提示獲得的, 把得到結(jié)果進(jìn)行列表展示
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“Vue使用高德地圖如何搭建實(shí)時(shí)公交應(yīng)用功能”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
分享題目:Vue使用高德地圖如何搭建實(shí)時(shí)公交應(yīng)用功能-創(chuàng)新互聯(lián)
瀏覽路徑:http://www.muchs.cn/article38/shopp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供標(biāo)簽優(yōu)化、網(wǎng)站維護(hù)、網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計(jì)、網(wǎng)站收錄、靜態(tài)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容