大家好，歡迎來到程式視點！我是小二哥！
最近負責的一個Vue專案中需要呼叫百度地圖API做定位、檢索等需求。
按照百度地圖官方 API 的接入文件，很多功能需要需要改造、封裝，實在太繁瑣了。
經過查閱對比，最後發現了Vue Baidu Map這個好用的元件。
Vue Baidu Map簡介
Vue Baidu Map 是一個基於 Vue.js 封裝的百度地圖元件，幾乎包含百度地圖官方所有的 API 示例，同時也支援引入百度地圖擴充套件包。
推薦理由
-
主要設計為 Vue 元件註冊的方式使用，也支援 cdn 直接引入。
-
直接使用封裝好的控制元件API，提高開發的效率。
-
官網提供詳細的中、英文文件說明以及足夠多的程式碼例子，可以快速應用在專案中。
使用
這裡展示在Vue專案中的使用
安裝
NPM載入依賴
$ npm install vue-baidu-map --save
註冊
全域性註冊：一次性引入百度地圖元件庫的所有元件。
import Vue from 'vue' import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { // ak 是在百度地圖開發者平臺申請的金鑰 詳見 http://lbsyun.baidu.com/apiconsole/key */ ak: 'YOUR_APP_KEY' })
區域性註冊：
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'; import BmView from 'vue-baidu-map/components/map/MapView'; //地圖檢視 import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch'; //搜尋 import BmMarker from 'vue-baidu-map/components/overlays/Marker'; //點標註 import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'; //標註彈窗 .... export default { components: { BaiduMap, BmView, BmLocalSearch, BmMarker, BmInfoWindow } }
模板元件使用
這和我們平常使用的其他模板元件一樣。
<template> <baidu-map class="bm-view"> </baidu-map> </template>
開發體驗
-
官網上的文件以及程式碼例子非常多，這讓新手們非常容易上手。
-
多數常用的功能都已經進行了二次的封裝，讓開發者不需要再重複造輪子。
-
再也不用去看難懂的百度地圖官方 API 文件了，可以接入引入元件到自己的 Vue 專案中去。
順便一提一下...
VUE BAIDU MAP地址 https://dafrok.github.io/vue-baidu-map/#/
祝大家搬磚愉快！
寫在最後
【程式視點】助力打工人減負，從來不是說說而已！
後續小二哥會繼續詳細分享更多實用的工具和功能。持續關注，這樣就不會錯過之後的精彩內容啦！
如果這篇文章對你有幫助的話，別忘了【點贊】【分享】支援下哦~