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&amp;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.cnblogs.com/star-wind/p…

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（）傳入起點和終點座標，是經過輸入提示得到的， 把獲得結果進行列表展現