1.首先在官网申请密钥: http://lbsyun.baidu.com/apiconsole/key 申请密钥
2. 在index.html中引用js文件,在头部引入
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=申请的密钥"></script>
3.在 webpack.config.js 配置文件中配置BMap,在module.exports 中与entry平级;如果还有其他的,同样在下面引入就可以了,比 如自定义覆盖物BMap_Symbol_SHAPE_POINT等 (需要重新 npm run dev启动服务器才可以) ;
entry: {
app: './src/main.js'
},
externals:{
"BMap": "BMap",
}
4.在引用地图的组件中创建一个容器,定义容器的宽高
<div id="all-map" class="all-map" ></div>
.all-map{
width: 600px;
height: 600px;
}
5.在引用地图的组件中引入BMap,否则会报”BMap undefined”的错误
import BMap from 'BMap'
6.在methods中定义创建地图的方法
BaiduMap(){
/**地图初始化 start */
var map = new BMap.Map("all-map"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
// 添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
7.在mounted生命周期中调用刚刚定义好的方法
mounted(){
this.BaiduMap()
}
然后会出现下面的效果:
在做项目的过程中参考其他人的经验整理的笔记
网友评论