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>
<div id="bdMap">div>
div>
好了，万事俱备只欠东风，这里啰嗦两句，如果你想把地图部分搞成一个组件，然后在父组件中引入的话，这样我觉得没得必要，【我师父说的，那我肯定要听话，事实证明师父是不会错的哈哈】原因很简单，父组件调用子组件的方法确实麻烦啊。而且还涉及到传参啊之类的
【步骤3】
在你当前组件的methods里面写方法来配置你的地图 （具体配置可以参考百度地图API文档示例demo）
说简单点：直接粘贴复制过来自己改配置就行了
下面是我自己写的配置项
methods: {
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就行了
#bdMap {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
这样最基本的引用就可以实现了。
进阶使用：
直接说这个功能的需求吧——实现点击城市名按钮，然后要在地图上面切换到具体的城市去，最好此时在地图上面要有一个城市的提示信息自动提示。
有一说一，这个功能实现起来还是有一点的难度的，但是，俺们是那种轻言放弃的人吗？
来吧，上代码
页面结构部分
简单说一下页面HTML代码：
CSS部分我用CSS3中的伪元素通过定位的方式实现二级菜单的基本样式就不用多说了
<div>
<ul class="domtree" style="font-size: 16px">
<li style="text-align: left">
这里写成这样是因为不好使用v-for来循环只有一个单独的li 所以干脆 在data下面的——company数组里面再多加了一个对象，用company[0]来表示
<span @click="setNewCenter(0)">{
{ company[0].name }}span>
<ul>
<div :key="item.cid" v-for="(item, i) in company">
外层嵌套div的目的是因为脚手架语法检查太严格了，不允许使用 v-for 后面还 加一个 v-if 所以就套了一个div来实现循环
里面的li来实现判断
<li v-if="i > 0" @click="setNewCenter(i)">
这里可以看出来循环出的每个li都有一个点击函数 接收一个i作为参数 然后索引i >0代表只循环数组第二项开始后面的项
{
{ item.name }}
li>
div>
ul>
li>
ul>
div>
<div>
<div id="bdMap">div>
div>
JS部分
data() {
return {
map: false,这里是点睛之笔啊，这一步起很大的作用，目的是让map在其他函数里面也能调用，因为文档上面的demo不是用vue写的，所以它配置了
一些基本项以后直接就在后面写XXX函数之类的来实现功能，但是vue不行啊，之前我们不是在methods里面写了一个myMap这个函数吗，但是你不可能
直接在它里面再写一个函数吧，这样直接会报错的，所以你得在外面写一个点击函数来控制它的点位的变化吧 对吗？
说了这么多，其实就是要实现map这个对象的共用的问题 【这一步其实等价于把map这个对象存在data里面，然后要用的地方直接加this就可以了】
marker: [],这里写个空数组，然后通过this.marker.push(new BMapGL.Marker(new BMapGL.Point(v.lng, v.lat)));
把画出来的点位push到空数组里面去
lng: 103.549, //初始化经度
lat: 30.7921, //初始化纬度
company: [
{
cid: "0",
name: "四川省电力总公司",
address: "成都市XX街XX号",
lng: 103.92,
lat: 30.79,
},
{
cid: "1",
name: "成都市电力公司",
address: "成都市XX街XX号",
lng: 103.92,
lat: 30.69,
},
{
cid: "2",
name: "绵阳市电力公司",
address: "绵阳市XX街XX号",
lng: 103.82,
lat: 30.59,
},
{
cid: "3",
name: "自贡市电力公司",
address: "自贡市XX街XX号",
lng: 103.72,
lat: 30.49,
},
{
cid: "4",
name: "攀枝花市电力公司",
address: "攀枝花市XX街XX号",
lng: 103.62,
lat: 30.39,
},
],
};
},
methods: {
myMap() {
this.map = new BMapGL.Map("bdMap"); // 创建Map实例
this.map.centerAndZoom(new BMapGL.Point(this.lng, this.lat), 12); // 初始化地图,设置中心点坐标和地图级别
this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
这一步是师父教我的，我认为是最妙的一部分
//直接forEach循环遍历目标数组的每一个item 然后提前就把点位画好
this.company.forEach((v, i) => {
//把5个点位提前画出来
this.marker.push(new BMapGL.Marker(new BMapGL.Point(v.lng, v.lat)));
this.map.addOverlay(this.marker[i]);//百度地图API 画出mark点位
这一步我还在研究中，我师父写的太精妙了，反正是用来让地图点位提示框通过 ——点击城市名—— 而自动显示的
貌似这一部分还是引入了一个JS的文件 然后才能调用 BMapLib.EventWrapper.addListener这个方法
BMapLib.EventWrapper.addListener(this.marker[i], "click", (e) => {
console.log("click");
this.map.openInfoWindow(//百度地图API 实现打开信息窗口 有两个参数 第一个是InfoWindow配置项，
//第二个是点位new BMapGL.Point(v.lng, v.lat)
new BMapGL.InfoWindow("地址 :" + this.company[i].address, {
width: 100,
height: 50,
title: this.company[i].name,
}),
new BMapGL.Point(v.lng, v.lat)
); // 开启信息窗口1
});
});
},
setNewCenter(i) {
this.lng = this.company[i].lng;
this.lat = this.company[i].lat;
var point = new BMapGL.Point(this.lng, this.lat);
this.map.setCenter(point); // 设置地图中心点
BMapLib.EventWrapper.trigger(this.marker[i], "click");
这里不能画点，只能提前把点点在图上画出来 不然传一个参数进去他就画一个点 这样会造成点数重叠
},
},
总结：
简单说，其实vue中用百度地图最基本的东西还是不难的，只是有很多的API需要去看去学习，难的地方还是在具体功能的实现上，
就像今天遇到的bug一样，把我师父都坑了哈哈，就是因为重复画mark点，导致原来绑定了事件的mark点被覆盖了，结果就是不显示
地图点位提示框，但是也不报错，哈哈哈，太不讲武德了吧。
用这个其实跟Echarts差不多，无非就是绑定dom 然后加配置项，然后画出来，只不过方法不同而已
希望看了各位看官看了能有一定的收获吧，记得来个一键三连呗。