一：初步繪制百度地圖
1:
npm install bmap --s

2：
<!-- 在index.html中添加百度地圖JavaScript API接口； -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密鑰" ></script>

3：
// 在webpack.base.conf.js配置文件中配置BMap,(創建BMap對象)，在module.exports 中與entry平級；
externals: {
‘BMap‘: ‘BMap‘
},

4：
// 導入BMap組件
import BMap from ‘BMap‘

5：
<!--地圖容器-->
<div id="allmap" class="allmap"></div>

mounted() {

// 百度地圖API功能
var map = new BMap.Map("allmap"); // 創建Map實例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地圖,設置中心點坐標和地圖級別
map.addControl(new BMap.MapTypeControl()); //添加地圖類型控件
map.setCurrentCity("北京"); // 設置地圖顯示的城市 此項是必須設置的
}

.allmap {
height: 600px;
}

二：定位

var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
alert(‘您的位置：‘+r.point.lng+‘,‘+r.point.lat);
}
else {
alert(‘failed‘+this.getStatus());
}
});

vue：vue中使用百度地圖