最近项目要使用高德地图写了一个实时公交的应用，这边分享一个小应用主要熟悉下高德地图在vue中的使用，常用api，vue的常用指令
如果有需要源码的童鞋请移步我的github地址 (欢迎star)
实现思路
在vue项目中导入高德地图 具体功能调用相应高德js APi
1.在vue项目中导入高德地图
1.修改webpac.base.conf.js文件
2.引入sdk 引入有两种方式，一种是在index页面直接引入
还有一种是异步加载
注意不管是采用哪种方式，都要保证你想要加载地图的js文件，在引入的sdk之后。这样，在第三步的时候，才不会报错
3.在当前需要加载vue页面引入
2.附近站点功能
{
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.线路实时详情
{
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.输入提示
rush:js;">
this.autocomplete.search(this.keywords,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.换乘详情
rush:js;">
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],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使用高德地图搭建实时公交应用功能（地图 + 附近站点+线路详情 + 输入提示+换乘详情）。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
