vue脚手架开发+百度地图API的使用（带实例）

学习目标：

在vue开发中彻底把 —— 百度地图API ——如何引用学会
看了我写的这篇文章，你一定可以的。

项目背景说明：

最近这几天在写vue项目，遇到要用百度地图API的情况，故上网去搜索，无奈方法五花八门，根本一点都不系统，而且有的文章完全胡说八道。按他的方法根本地图都出不来，用最近比较流行的一句话概括：

好了废话不多说，直接来吧。

个人总结的使用方法：

【步骤1】
直接在你搭建好的vue项目的public文件夹中的——index.html——的body结束标签上面引入下面这行代码
【很多文章都说要 在项目中——npm install vue-baidu-map –save 个人觉得没必要，至少我没有这样做】

<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=自己的密钥"></script>

至于密钥就不多说了，网上是对的哈哈。
步骤原理分析：vue是单页面开发，所以不管如何它始终只是把index.html解析成最终的页面而已，就像我们写一个HTML页面一样，是不是也可以在body的结束标签上面引入JS文件一样呢？
一样的道理嘛！

【步骤2】
类似于引用Echarts一样的手法 需要先写一个div之类的来装地图（绑定一个dom），让地图能有地方展示出来

 <div>
      <!-- 使用百度地图API -->
      <div id="bdMap"></div>
  </div>

好了，万事俱备只欠东风，这里啰嗦两句，如果你想把地图部分搞成一个组件，然后在父组件中引入的话，这样我觉得没得必要，【我师父说的，那我肯定要听话，事实证明师父是不会错的哈哈】原因很简单，父组件调用子组件的方法确实麻烦啊。而且还涉及到传参啊之类的

【步骤3】
在你当前组件的methods里面写方法来配置你的地图 （具体配置可以参考百度地图API文档示例demo）
说简单点：直接粘贴复制过来自己改配置就行了
下面是我自己写的配置项

methods: {
   
	此处说明下，map我已经在data里面定义好了 为false，所以才是this.map  其主要目的就是后面的功能需要，
	你也可以直接在这里定义map
    myMap() {
   
      this.map = new BMapGL.Map("bdMap"); // 创建Map实例 注意要和你上面写的div的id名一样
      this.map.centerAndZoom(new BMapGL.Point(this.lng, this.lat), 12); // 初始化地图,设置中心点坐标和地图级别
      this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
      //这里的配置很多，就不一一说明了，
    
  },
  mounted() {
   
  //最后需要在mounted钩子里面调一次你自己定义的方法
    this.myMap();
  },

【步骤4】
最后再调整一下CSS就行了