Vue項目引用百度地圖並實現搜索定位等功能

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

1、前期准備

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

• 在你的vue項目中引入element-ui （引入方法 戳這）
  說明：本案例是結合element-ui進行開發，主要是為方便實現上面第8點功能，大家若是引入其他UI框架也可以，功能實現方法參照本案例自行修改即可。
• 申請百度地圖AK
  前往 百度地圖開放平台控制台 ，登錄百度賬號，創建應用即得。

2、引入百度地圖

下面介紹如何在vue項目中引入百度地圖
方法一
第1步：在 index.html 中引入下面代碼，注意將你的AK代入

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

第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文件，內容如下：

/** * 動態加載百度地圖api函數 * @param {String} ak 百度地圖AK，必傳 */ 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、掛載百度地圖
首先需要給地圖分配一個容器，並設置寬高

<div id="map-container" style="width:100%;height:500px;"></div>

根據需求，定義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，封裝一個逆地址解析函數，供下面的功能調用。

/** * 逆地址解析函數（根據坐標點獲取詳細地址） * @param {Object} point 百度地圖坐標點，必傳 */ 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的 <el-autocomplete>組件，該組件提供了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> <template slot-scope="{ item }"> <i class="el-icon-search fl mgr10"></i> <div style="overflow:hidden;"> <div class="title">{{ item.title }}</div> <span class="address ellipsis">{{ item.address }}</span> </div> </template> </el-autocomplete>

接下來需提供兩個方法：

• 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返回到<el-autocomplete>組件中進行顯示 } 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; } } }

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

附：
項目源碼git地址：vue-admin-web
項目線上地址：vue-admin-web/BMap