• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

互联网 diligentman 1周前 (11-20) 11次浏览

学习目标:

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

项目背景说明:

最近这几天在写vue项目,遇到要用百度地图API的情况,故上网去搜索,无奈方法五花八门,根本一点都不系统,而且有的文章完全胡说八道。按他的方法根本地图都出不来,用最近比较流行的一句话概括:
vue脚手架开发+百度地图API的使用(带实例)
好了废话不多说,直接来吧。

个人总结的使用方法:

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

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

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

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

 <div>
      <!-- 使用百度地图API -->
      <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>
      <!-- XX架构布局 -->
      <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>
      <!-- 使用百度地图API -->
      <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 然后加配置项,然后画出来,只不过方法不同而已

希望看了各位看官看了能有一定的收获吧,记得来个一键三连呗。


喜欢 (0)