1.首先在官網(wǎng)申請(qǐng)密鑰:?http://lbsyun.baidu.com/apiconsole/key?申請(qǐng)密鑰
2. 在index.html中引用js文件侨嘀，在頭部引入
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=申請(qǐng)的密鑰"></script>
3.在 webpack.config.js 配置文件中配置BMap纺阔，在module.exports 中與entry平級(jí)弟晚；如果還有其他的围段，同樣在下面引入就可以了吧彪，比 如自定義覆蓋物BMap_Symbol_SHAPE_POINT等 (需要重新 npm run dev啟動(dòng)服務(wù)器才可以) 龄寞；
entry: {
? ? ????app: './src/main.js'
? },
? externals:｛
????????????"BMap": "BMap",
? }
4.在引用地圖的組件中創(chuàng)建一個(gè)容器赁豆，定義容器的寬高
<div id="all-map" class="all-map" ></div>
.all-map{
????????????width: 600px;
? ? ????????height: 600px;
}
5.在引用地圖的組件中引入BMap椎镣，否則會(huì)報(bào)”BMap undefined”的錯(cuò)誤
import BMap from 'BMap'
6.在methods中定義創(chuàng)建地圖的方法
BaiduMap(){
? ? ? ? ? ? ? ?/**地圖初始化 start */
? ? ? ? ? ? ? ?var map = new BMap.Map("all-map");? ? // 創(chuàng)建Map實(shí)例
? ? ? ? ? ? ? ?map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);? // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
? ? ? ? ? ? ? ? // 添加地圖類型控件
? ? ? ? ? ? ? ? map.addControl(new BMap.MapTypeControl({
? ? ? ? ? ? ? ? ? ? ????????mapTypes:[
? ? ? ? ? ? ? ? ? ? ? ? ????????????BMAP_NORMAL_MAP,
? ? ? ? ? ? ? ? ? ? ? ? ????????????BMAP_HYBRID_MAP
? ? ? ? ? ? ? ? ? ]}));? ?
? ? ? ? ? ? ? ? ? map.setCurrentCity("北京");? ? ? ? ? // 設(shè)置地圖顯示的城市 此項(xiàng)是必須設(shè)置的
? ? ? ? ? ? ? ? ? map.enableScrollWheelZoom(true);? ? //開(kāi)啟鼠標(biāo)滾輪縮放
7.在mounted生命周期中調(diào)用剛剛定義好的方法
mounted(){
? ? ? ? ? ? ?this.BaiduMap()
?}
然后會(huì)出現(xiàn)下面的效果：
在做項(xiàng)目的過(guò)程中參考其他人的經(jīng)驗(yàn)整理的筆記
