方法来自大神【超华】
1、进入百度API
操作官网：
根据官网流程：
登录自己的百度账号->
申请然后点击邮箱内获取的新链接->
填写自己需要的信息（Referer白名单没有可以填：*）->
拥有自己的应用（保存好绿色圈圈的密钥）
2、引入地图
替换public文件夹下的index.html
ak换成刚刚保存的密钥
<script src="//api./api?v=2.0&ak=我们申请下来的ak" type="text/javascript"></script>
3、页面添加地图容器
// 必须有一层是规划好宽高的<div style="width: 570px; height: 400px; padding-left: 30px;"><div style="width: 100%; height: 100%" id="map" class="map"></div></div>
4、加载地图
mounted(){// 创建Map实例var map = new BMap.Map("map"); // 初始化地图,设置中心点坐标和地图级别map.centerAndZoom(new BMap.Point(104.07258, 30.550701), 20); // map.centerAndZoom：第一个参数可以是根据之前创建好的一个点为中心，创建出地图，也可以根据城市地区的中文名称创建地图。第二个参数是地图缩放级别，最大为19，最小为0map.addControl(//添加地图类型控件new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],}));map.setCurrentCity("成都"); // 设置地图显示的城市 此项是必须设置的map.enableScrollWheelZoom(true);},
还有显示卫星的模式
// GL版命名空间为BMapGLvar map = new BMapGL.Map("map"); // 创建Map实例map.centerAndZoom(new BMapGL.Point(111.68059726328418,40.82603915587445), 18); // 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放map.setMapType(BMAP_EARTH_MAP);// 设置地图类型为地球模式// 事件map.addEventListener('click', function (e) {alert('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);});},
现在应该有地图出现在你的页面上啦！
附我所有用到的资料网址：百度地图API SDK
