本文將介紹如何使用百度地圖 API 結(jié)合 Vue.js 實(shí)現(xiàn)地圖繪制線路功能。在實(shí)際應(yīng)用場(chǎng)景中，繪制線路是一個(gè)非常有用的功能，比如在線地圖應(yīng)用、定位客戶服務(wù)、出行規(guī)劃等都需要使用線路繪制。

在開始之前，需要注冊(cè)百度地圖開發(fā)者賬號(hào)，并獲取開發(fā)者密鑰。在本例中，我們使用的是百度地圖 JavaScript API 3.0 版本。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的密鑰"></script>

接下來，我們需要初始化地圖，加載 JavaScript API，創(chuàng)建地圖容器，并設(shè)置地圖的中心點(diǎn)和縮放級(jí)別。這里我們使用 Vue.js 的 mounted 生命周期鉤子函數(shù)。

...
mounted() {
let map = new BMap.Map('allmap')
let point = new BMap.Point(116.404, 39.915)
map.centerAndZoom(point, 15)
}
...

接下來，我們需要獲取用戶輸入的起點(diǎn)和終點(diǎn)地址，并使用百度地圖的 "地理編碼" 功能將起點(diǎn)和終點(diǎn)轉(zhuǎn)換成經(jīng)緯度坐標(biāo)。

...
methods: {
searchRoute(start, end) {
let geoc = new BMap.Geocoder()
geoc.getPoint(start, function(point){
if (point) {
// 在地圖上顯示起點(diǎn)圖標(biāo)
let marker = new BMap.Marker(point)
map.addOverlay(marker)
}
})
geoc.getPoint(end, function(point){
if (point) {
// 在地圖上顯示終點(diǎn)圖標(biāo)
let marker = new BMap.Marker(point)
map.addOverlay(marker)
}
})
}
}
...

現(xiàn)在，我們已經(jīng)獲得了起點(diǎn)和終點(diǎn)的經(jīng)緯度坐標(biāo)，接下來就可以通過百度地圖的 "路線規(guī)劃" 功能來繪制出路徑。

...
methods: {
searchRoute(start, end) {
let driving = new BMap.DrivingRoute(map, {
renderOptions: {
map: map,
autoViewport: true,
},
})
driving.search(start, end)
}
}
...

最后，我們需要在頁(yè)面上添加輸入框和按鈕，讓用戶輸入起點(diǎn)和終點(diǎn)地址，并觸發(fā)繪制路徑的功能。

<template>
<div>
<div>
<label>起點(diǎn)地址:</label>
<input type="text" v-model="start" placeholder="請(qǐng)輸入起點(diǎn)地址">
</div>
<div>
<label>終點(diǎn)地址:</label>
<input type="text" v-model="end" placeholder="請(qǐng)輸入終點(diǎn)地址">
</div>
<button @click="searchRoute(start, end)">繪制路徑</button>
<div id="allmap" style="height: 400px;"></div>
</div>
</template>

這樣，我們就完成了地圖繪制線路的功能。