本文將介紹如何使用百度地圖 API 結合 Vue.js 實現地圖繪制線路功能。在實際應用場景中，繪制線路是一個非常有用的功能，比如在線地圖應用、定位客戶服務、出行規劃等都需要使用線路繪制。

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

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

接下來，我們需要初始化地圖，加載 JavaScript API，創建地圖容器，并設置地圖的中心點和縮放級別。這里我們使用 Vue.js 的 mounted 生命周期鉤子函數。

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

接下來，我們需要獲取用戶輸入的起點和終點地址，并使用百度地圖的 "地理編碼" 功能將起點和終點轉換成經緯度坐標。

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

現在，我們已經獲得了起點和終點的經緯度坐標，接下來就可以通過百度地圖的 "路線規劃" 功能來繪制出路徑。

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

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

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

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