步驟一：申請百度地圖密鑰；

我們提供的服務有：成都網站建設、成都網站制作、微信公眾號開發、網站優化、網站認證、繁峙ssl等。為上千多家企事業單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的繁峙網站制作公司

JavaScript API v1.4以及以前的版本無序申請秘鑰（ak），自v1.5版本開始需要先申請秘鑰（ak），才可以使用，如需獲取更高的配額，需要申請  認證企業用戶。百度地圖API 鏈接地址:http://lbsyun.baidu.com/apiconsole/key  

步驟二：在index.html中添加百度地圖JavaScript API接口；  

   // v1.4版本以及以前版本

 //1.5版本，需要秘鑰

步驟三：在webpack.base.conf.js配置文件中配置BMap，在module.exports 中與entry平級；如果還有其他的，同樣在下面引入就可以了，比如自定義覆蓋物BMap_Symbol_SHAPE_POINT等。    (需要重新 npm run dev才可以)      

module.exports = {
 entry: {
 app: './src/main.js'
 },
 externals: {
 'BMap': 'BMap',
 'BMap_Symbol_SHAPE_POINT': 'BMap_Symbol_SHAPE_POINT'
 },

步驟四：在組件中創建一個容器，用來顯示百度地圖（寬高最好都是100%）；

步驟五：在地圖組件中import BMap，否則會出現"BMap undefined"；還有這個BMap_Symbol_SHAPE_POINT，因為是用“_”連字符,會報錯讓你這個沒有用駝峰命名。所以引入時，把這個連字符去掉就行了。

import BMap from 'BMap
import BMapSymbolSHAPEPOINT from 'BMap_Symbol_SHAPE_POINT'

步驟六：創建地圖對象，在mounted生命周期調用；      

mounted () {
 this.baiduMap()
},
methods: {
 // 返回
 goback () {
 this.$router.go(-1)
 },
 baiduMap () {
 var map = new BMap.Map('allmap')
 var point = new BMap.Point(111.742579, 40.818675)
 map.centerAndZoom(point, 12)
 var marker = new BMap.Marker(point) // 創建標注
 map.addOverlay(marker)    // 將標注添加到地圖中
 }
}

步驟七：將組件插入父組件中；

以上所述是小編給大家介紹的vue項目中調用百度地圖API使用方法解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創新互聯網站的支持！