欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-08 19:25:30
最近项目要使用高德地图写了一个实时公交的应用,这边分享一个小应用主要熟悉下高德地图在vue中的使用,常用api,vue的常用指令 先给大家看下页面效果:  ...

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

先给大家看下页面效果:

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

如果有需要源码的童鞋请移步我的github地址 (欢迎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'

原文链接:

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使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情),希望对大家有所帮助