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 相关文章推荐
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
Feb 03 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
Dec 25 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
zTree插件下拉树使用入门教程
Apr 11 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
基于ant design日期控件使用_仅月份的操作
Oct 27 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
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
jQuery实现文档树效果
2017/02/20 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
vue的token刷新处理的方法
2018/07/17 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
python私有属性和方法实例分析
2015/01/15 Python
numpy 计算两个数组重复程度的方法
2018/11/07 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
pygame实现俄罗斯方块游戏(基础篇2)
2019/10/29 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
python模拟实现斗地主发牌
2020/01/07 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
如何基于线程池提升request模块效率
2020/04/18 Python
css3一款3D字体带阴影效果的实现步骤
2013/03/20 HTML / CSS
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
幼儿园教师自我鉴定
2014/03/20 职场文书
党支部特色活动方案
2014/08/20 职场文书
入队仪式主持词
2015/07/04 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python