一、前期准备
1、 申请密匙
去百度地图控制台申请密匙。
2、 在index.html引入
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=您的密钥也就是ak值"></script>
注:去掉地图左下角的logo
.BMap_cpyCtrl { display: none; } .anchorBL { display: none; }
3、webpack.base.conf.js里面配置
在module.exports中与entry同级添加
externals: { "BMap": "BMap" },
4、 需要使用百度地图的组件中导入(地图中用到BMap 的需要导入)
import BMap from 'BMap'
5、 创建一个地图容器,需要有宽高
<div id="mapBox"></div>
6、 然后在vue生命周期的mounted中调用
mounted() { this.initMap(); },
InitMap方法如下
// 初始化地图 initMap() { this.map = new BMap.Map("mapBox"); // 创建Map实例 this.map.centerAndZoom(new BMap.Point(108.9