vue引入百度地圖

功能點：

1.挂載百度地圖

2.封裝逆位址解析函數（根據坐标點擷取詳細位址）

3.設定圖像标注并綁定拖拽标注結束後事件

4.添加（右上角）平移縮放控件

5.添加（左下角）定位控件

6.浏覽器定位（定位目前地點）

7.綁定點選地圖任意點事件

8.結合element-ui實作輸入提示選取位址并定位功能

二、前期準備

在正式開發之前，我們先做好以下準備：

在你的vue項目中引入element-ui （引入方法 戳這）

說明：本案例是結合element-ui進行開發，主要是為友善實作上面第8點功能，大家若是引入其他UI架構也可以，功能實作方法參照本案例自行修改即可。

申請百度地圖AK

前往 百度地圖開放平台控制台 ，登入百度賬号，建立應用即得。申請百度地圖AK

三、引入百度地圖

下面介紹如何在vue項目中引入百度地圖

方法一

第1步：在 index.html 中引入下面代碼，注意将你的AK代入

第2步：在 webpack.base.conf.js 添加externals.BMap配置，與entry平級，内容如下，

entry: {

app: [‘babel-polyfill’, ‘./src/main.js’]

},

externals: {

BMap: ‘BMap’

}

第3步：在元件中引入BMap

import BMap from ‘BMap’

方法二

我們知道，vue-cli 3.0+ 的版本已經取消了webpack.conf這些檔案了，是以上面的方法就不适用了。而且，方法一在index.html中全局引入百度api，有點耗性能。更多時候我們隻希望在單個元件裡按需引入即可，是以下面介紹的是以封裝的方法引入。

第1步：在你的項目js資源檔案夾下建立loadBMap.js檔案，内容如下：

export default function loadBMap(ak) {

return new Promise(function(resolve, reject) {

if (typeof window.BMap !== ‘undefined’) {

resolve(window.BMap)

return true

}

window.onBMapCallback = function() {

resolve(window.BMap)

}

let script = document.createElement(‘script’)

script.type = ‘text/javascript’

script.src =

‘http://api.map.baidu.com/api?v=3.0&ak=’ + ak + ‘&callback=onBMapCallback’

script.onerror = reject

document.head.appendChild(script)

})

}

第2步：在元件中引入loadBMap函數

import loadBMap from ‘@/<js資源檔案夾>/loadBMap.js’

第3步：在mounted中調用 loadBMap()

//這裡運用async/await 進行異步處理，保證BMap加載進來後才執行後面的操作

async mounted() {

await loadBMap(‘您的密鑰’) //加載引入BMap

…

}

這樣就在目前元件中引入百度地圖 BMap 了，可以開始開發了。

四、功能解析

下面開始對上述所列 8 點功能進行詳細的代碼解析。

說明：本文用的是方法一引入百度地圖，源碼 用的是方法二

1、挂載百度地圖

首先需要給地圖配置設定一個容器，并設定寬高

根據需求，定義data參數

data() {

return {

form: {

address: ‘’, //詳細位址

addrPoint: { //詳細位址經緯度

lng: 0,

lat: 0

}

},

map: ‘’, //地圖執行個體

mk: ‘’ //Marker執行個體

}

}

初始化地圖

methods: {

initMap() {

var that = this;

this.map = new BMap.Map(“map-container”, {enableMapClick:false}) //建立地圖執行個體，enableMapClick:false ：禁用地圖預設點選彈框

var point = new BMap.Point(113.30765,23.12005);

this.map.centerAndZoom(point,19)

}

},

mounted() {

this.initMap()

}

到此，就可以在你的頁面上看到地圖啦！

2、封裝逆位址解析函數

參考百度地圖 逆位址解析 示例demo，封裝一個逆位址解析函數，供下面的功能調用。

getAddrByPoint(point){

var that = this;

var geco = new BMap.Geocoder();

geco.getLocation(point, function(res){

console.log(res) //内容見下圖

that.mk.setPosition(point) //重新設定标注的地理坐标

that.map.panTo(point) //将地圖的中心點更改為給定的點

that.form.address = res.address; //記錄該點的詳細位址資訊

that.form.addrPoint = point; //記錄目前坐标點

})

}

逆位址解析擷取的資訊

3、設定圖像标注并綁定拖拽标注結束後事件

圖像标注Marker是百度地圖覆寫物類中的其中一種，它用來辨別目前坐标點的位置，也就是我們在地圖上所看到的小紅點（當然這個點也可以自定義圖示樣式，這裡我們不說，有興趣的可以參考百度地圖覆寫物示例 - 設定點的新圖示）。

設定圖像标注很簡單，隻需要下面兩行代碼

initMap() {

…

this.mk = new BMap.Marker(point,{enableDragging:true}) //建立一個圖像标注執行個體，enableDragging：是否啟用拖拽，預設為false

this.map.addOverlay(this.mk) //将覆寫物添加到地圖中

}

這樣你就可以在地圖上看到小紅點啦，接下來我們給這個點綁定拖拽事件。

拖拽事件有三類，dragstart（開始拖拽時觸發）、dragging（拖拽過程中觸發）和dragend（拖拽結束時觸發），實際項目中我們更注重的是拖拽标注結束後的位置資訊，是以我們在這給标注綁定拖拽結束後事件：

initMap() {

…

this.mk.addEventListener(‘dragend’, function(e){

that.getAddrByPoint(e.point) //拖拽結束後調用逆位址解析函數，e.point為拖拽後的地理坐标

})

}

注意：這裡我們将代碼寫在上面定義的 initMap 函數中，地圖初始化時一同執行即可

4、添加（右上角）平移縮放控件

百度地圖提供了很多的 控件類，友善我們檢視和操作地圖。本案例隻解析平移縮放控件NavigationControl 和 地圖定位控件GeolocationControl，其他控件可 參考示例 自行學習。

下面我們先引入平移縮放控件并将其位置置于右上角：

initMap() {

…

var navigationControl = new BMap.NavigationControl({ //建立一個特定樣式的地圖平移縮放控件

anchor: BMAP_ANCHOR_TOP_RIGHT, //靠右上角位置

type: BMAP_NAVIGATION_CONTROL_SMALL //SMALL控件類型

})

this.map.addControl(navigationControl ) //将控件添加到地圖

}

附：

anchor參數解析

BMAP_ANCHOR_TOP_LEFT | 控件将定位到地圖的左上角

BMAP_ANCHOR_TOP_RIGHT | 控件将定位到地圖的右上角

BMAP_ANCHOR_BOTTOM_LEFT | 控件将定位到地圖的左下角

BMAP_ANCHOR_BOTTOM_RIGHT | 控件将定位到地圖的右下角

type參數解析

BMAP_NAVIGATION_CONTROL_LARGE | 标準的平移縮放控件（包括平移、縮放按鈕和滑塊）

BMAP_NAVIGATION_CONTROL_SMALL | 僅包含平移和縮放按鈕

BMAP_NAVIGATION_CONTROL_PAN | 僅包含平移按鈕

BMAP_NAVIGATION_CONTROL_ZOOM | 僅包含縮放按鈕

5、添加（左下角）定位控件

下面我們引入地圖定位控件并将其位置置于左下角：

initMap() {

…

var geolocationControl = new BMap.GeolocationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}) //建立一個地圖定位控件

geolocationControl.addEventListener(“locationSuccess”, function(e){ //綁定定位成功後事件

that.getAddrByPoint(e.point) //定位成功後調用逆位址解析函數

});

geolocationControl.addEventListener(“locationError”,function(e){ //綁定定位失敗後事件

alert(e.message);

});

this.map.addControl(geolocationControl) //将控件添加到地圖

}

6、浏覽器定位

參考百度地圖 浏覽器定位 示例demo，進入頁面，我們将坐标定位到目前所在地坐标。

geolocation() {

var that = this;

var geolocation = new BMap.Geolocation();

geolocation.getCurrentPosition(function(res){

if(this.getStatus() == BMAP_STATUS_SUCCESS){

that.getAddrByPoint(res.point) //當成功時，調用逆位址解析函數

} else {

alert(‘failed’+this.getStatus()); //失敗時，彈出失敗狀态碼

}

},{enableHighAccuracy: true}) //enableHighAccuracy：是否要求浏覽器擷取最佳效果，預設為false

}

同樣在initMap中調用即可

initMap() {

…

this.geolocation()

}

7、綁定點選地圖任意點事件

在地圖上選取位址。點選地圖上任意點，都将擷取該點的位址資訊。

initMap() {

…

this.map.addEventListener(‘click’, function(e){ //給地圖綁定點選事件

that.getAddrByPoint(e.point) //點選後調用逆位址解析函數

})

}

8、結合element-ui實作輸入提示選取位址并定位功能

最後是本案例的主要功能，輸入框輸入關鍵字搜尋位址，調用百度地圖LocalSearch服務進行檢索。

首先，我們需要寫入一個輸入框。這裡利用的是element-ui的 元件，該元件提供了fetch-suggestions屬性和select事件【參考文檔】，友善我們把檢索結果周遊顯示出來并進行選擇操作。

<el-autocomplete

style=“width:100%;”

popper-class=“autoAddressClass”

v-model=“form.address”

:fetch-suggestions=“querySearchAsync”

:trigger-on-focus=“false”

placeholder=“詳細位址”

@select=“handleSelect”

clearable>

{{ item.title }}

{{ item.address }}

接下來需提供兩個方法：

querySearchAsync：搜尋建議方法（參考百度地圖檢索示例 - 本地檢索的資料接口）

querySearchAsync(str,cb){

var options = {

onSearchComplete: function(res){ //檢索完成後的回調函數

var s = [];

if (local.getStatus() == BMAP_STATUS_SUCCESS){

for (var i = 0; i < res.getCurrentNumPois(); i ++){

s.push(res.getPoi(i));

}

cb(s) //擷取到資料時，通過回調函數cb傳回到元件中進行顯示

} else{

cb(s)

}

}

}

var local = new BMap.LocalSearch(this.map, options) //建立LocalSearch構造函數

local.search(str) //調用search方法，根據檢索詞str發起檢索

}

handleSelect：點選選中建議項時觸發的方法

handleSelect(item) {

this.form.address = item.address + item.title; //記錄詳細位址，含建築物名

this.form.addrPoint = item.point; //記錄目前選中位址坐标

this.map.clearOverlays() //清除地圖上所有覆寫物

this.mk = new BMap.Marker(item.point) //根據所選坐标重新建立Marker

this.map.addOverlay(this.mk) //将覆寫物重新添加到地圖中

this.map.panTo(item.point) //将地圖的中心點更改為標明坐标點

}

最後再稍微處理一下autocomplete元件的下拉款樣式

.autoAddressClass{

li {

i.el-icon-search {margin-top:11px;}

.mgr10 {margin-right: 10px;}

.title {

text-overflow: ellipsis;

overflow: hidden;

}

.address {

line-height: 1;

font-size: 12px;

color: #b4b4b4;

margin-bottom: 5px;

}

}

}

至此，我們就完成了上面所有的功能點。

轉發于：https://www.cnblogs.com/Marco-hui/p/12155995.html

如有問題請聯系部落客