https://blog.csdn.net/wang1006008051/article/details/78034585

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

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

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

1、 ? ? // ? v1.4版本以及以前版本

2、 ?//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'? },

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

步驟五：在地圖組件中import BMap，否則會(huì)出現(xiàn)"BMap undefined"；還有這個(gè)BMap_Symbol_SHAPE_POINT，因?yàn)槭怯谩癬”連字符，

? ? ? ? ? ? ? ? ? 會(huì)報(bào)錯(cuò)讓你這個(gè)沒有用駝峰命名。所以引入時(shí)，把這個(gè)連字符去掉就行了。

? import BMapfrom 'BMap

? import BMapSymbolSHAPEPOINTfrom 'BMap_Symbol_SHAPE_POINT'

??步驟六：創(chuàng)建地圖對象，在mounted生命周期調(diào)用；? ? ? ? ??

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)// 創(chuàng)建標(biāo)注? ? map.addOverlay(marker)// 將標(biāo)注添加到地圖中? }}

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