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 相关文章推荐
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
Nov 18 Javascript
SeaJS中use函数用法实例分析
Oct 10 Javascript
使用Electron构建React+Webpack桌面应用的方法
Dec 15 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 Javascript
Selenium执行JavaScript脚本的方法示例
Dec 31 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 empty函数判断mysql表单是否为空
2010/04/12 PHP
PHP 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
PHP-FPM之Chroot执行环境详解
2015/08/03 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
jQuery1.6 使用方法一
2011/11/23 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
2020/05/19 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
Python中的pass语句使用方法讲解
2015/05/14 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
Python tcp传输代码实例解析
2020/03/18 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
Skyscanner波兰:廉价航班
2017/11/07 全球购物
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
益模软件Java笔试题
2012/03/27 面试题
介绍一下linux的文件权限
2014/07/20 面试题
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
学生宿舍管理制度
2014/01/30 职场文书
学习2014年全国两会心得体会
2014/03/12 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
2014年终个人总结报告
2015/03/09 职场文书
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers