这次给大家带来怎样操作vue做出高德地图搭建实时公交应用，操作vue做出高德地图搭建实时公交应用的注意事项有哪些，下面就是实战案例，一起来看一下。
最近项目要使用高德地图写了一个实时公交的应用，这边分享一个小应用主要熟悉下高德地图在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'
原文链接： http://www.jb51.net/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（）传入起点和终点坐标，是通过输入提示获得的， 把得到结果进行列表展示
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
怎样使用angularjs实现标签页tab选项卡切换
如何使用koa2开发微信二维码扫码支付
以上就是怎样操作vue做出高德地图搭建实时公交应用的详细内容。