Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)


Posted in Javascript onMay 16, 2018

最近项目要使用高德地图写了一个实时公交的应用,这边分享一个小应用主要熟悉下高德地图在vue中的使用,常用api,vue的常用指令

先给大家看下页面效果:

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使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
JavaScript面向对象编程入门教程
Apr 16 Javascript
JavaScript代码里的判断小结
Aug 22 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
Sep 05 Javascript
Three.js基础部分学习
Jan 08 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
Angular4 中内置指令的基本用法
Jul 31 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
AngularJS 应用模块化的使用
Apr 04 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
May 16 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
May 16 #Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
May 16 #Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 #Javascript
浅谈如何通过node.js对数据进行MD5加密
May 16 #Javascript
如何用input标签和jquery实现多图片的上传和回显功能
May 16 #jQuery
vue keep-alive请求数据的方法示例
May 16 #Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 #Javascript
You might like
main.php
2006/12/09 PHP
新手配置 PHP 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
PHP漏洞全解(详细介绍)
2012/11/13 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
JavaScript中常用的运算符小结
2012/01/18 Javascript
jquery分页插件AmSetPager(自写)
2013/04/15 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
浅谈Python的Django框架中的缓存控制
2015/07/24 Python
一张图带我们入门Python基础教程
2017/02/05 Python
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
python全栈知识点总结
2019/07/01 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
年会活动策划方案
2014/01/23 职场文书
电子信息科学专业自荐信
2014/01/30 职场文书
开会迟到检讨书
2014/02/03 职场文书
《问银河》教学反思
2014/02/19 职场文书
生物制药专业自我鉴定
2014/02/19 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
解除施工合同协议书
2014/10/17 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书