最近專案要使用高德地圖寫了一個實時公交的應用，這邊分享一個小應用主要熟悉下高德地圖在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.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（）傳入起點和終點座標，是通過輸入提示獲得的， 把得到結果進行列表展示