最近项目要使用高德地图写了一个实时公交的应用，这边分享一个小应用主要熟悉下高德地图在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://plete' && 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使用高德地图搭建实时公交应用功能（地图 + 附近站点+线路详情 + 输入提示+换乘详情），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！