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


            最近项目要使用高德地图写了一个实时公交的应用，这边分享一个小应用主要熟悉下高德地图在vue中的使用，常用api，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'



原文链接： //www.zwyuanma.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使用高德地图搭建实时公交应用功能（地图 + 附近站点+线路详情 + 输入提示+换乘详情），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对中文源码网网站的支持！