Vue使用高德地图搭建实时公交应用功能（地图 + 附近站点+线路详
发布时间：2020-12-17 02:17:04 所属栏目：百科 来源：网络整理
导读：最近项目要使用高德地图写了一个实时公交的应用，这边分享一个小应用主要熟悉下高德地图在vue中的使用，常用api，vue的常用指令 先给大家看下页面效果： 如果有需要源码的童鞋请移步我的github地址 (欢迎star) 实现思路 在vue项目中导入高德地图 具体功能调
|
最近项目要使用高德地图写了一个实时公交的应用，这边分享一个小应用主要熟悉下高德地图在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.输入提示这边使用指令v-on:input调用我们输入提示的方法进行列表展示 5.换乘详情这里我们调用 总结以上所述是小编给大家介绍的Vue使用高德地图搭建实时公交应用功能（地图 + 附近站点+线路详情 + 输入提示+换乘详情）。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
