【vue+百度地图】vue项目使用百度地图API（普通展示）

方法来自大神【超华】

1、进入百度API

操作官网：https://lbsyun.baidu.com

根据官网流程：

登录自己的百度账号->
申请然后点击邮箱内获取的新链接->
填写自己需要的信息（Referer白名单没有可以填：*）->
拥有自己的应用（保存好绿色圈圈的密钥）

2、引入地图

替换public文件夹下的index.html
ak换成刚刚保存的密钥

<script src="//api.map.baidu.com/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，最小为0
      map.addControl(//添加地图类型控件
        new BMap.MapTypeControl({
          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
        })
      );
      map.setCurrentCity("成都"); // 设置地图显示的城市 此项是必须设置的
      map.enableScrollWheelZoom(true);
},

还有显示卫星的模式

       // GL版命名空间为BMapGL
      var 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