最近项目要使用高德地图写了一个实时公交的应用,这边分享一个小应用主要熟悉下高德地图在vue中的使用,常用api,vue的常用指令
先给大家看下页面效果:
如果有需要源码的童鞋请移步我的github地址 vue搭建实时公交 (欢迎star)
实现思路
在vue项目中导入高德地图 具体功能调用相应高德js APi
1.在vue项目中导入高德地图
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=您申请的key值"></script>
还有一种是异步加载
<script src="http://webapi.amap.com/maps?v=1.3&key=您申请的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之后。这样,在第三步的时候,才不会报错
3.在当前需要加载vue页面引入
import AMap from 'AMap'
原文链接: https://3water.com/article/112413.htm
2.附近站点功能
AMap.service(['AMap.PlaceSearch'], function () { var placeSearch = new AMap.PlaceSearch({ // 构造地点查询类 pageSize: 4, typ: '', pageIndex: 1, city: '苏州' // 城市 }) // 中心点坐标 // [currentLocation.lng,currentLocation.lat] // 120.6400961887,31.1411187922 var currentLocation = true if (currentLocation !== undefined) { placeSearch.searchNearBy('公交站点', [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))
这边主要调用高德周边搜索API,构造地点查询类tye 设为空,采用公交站点为关键字进行查询,这边中心点坐标是写死的,各位小伙伴可以调用高德定位api去获得当前坐标
3.线路实时详情
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) { // 取回公交路线查询结果 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 { // 无数据或者查询失败 } // setInterval(busposition(), 60000) }.bind(this)) }.bind(this)) },
这边调用公交路线查询接口,查询相关路线详情,这边小车车的位置是一个写死数组(实际情况可以根据班车GPS坐标判断班车在哪两个站点之间),可以点击相应站点显示最近班车相聚站点数
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调用我们输入提示的方法进行列表展示
5.换乘详情
AMap.service('AMap.Transfer', function () { // 回调函数 // 实例化Transfer var transptions = { policy: 0, // 乘车策略,少时间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))
这里我们调用transfer.search()
传入起点和终点坐标,是通过输入提示获得的, 把得到结果进行列表展示
总结
以上所述是小编给大家介绍的Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
- Author -
blueCoder声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@