在 VUE 项目中灵活使用百度地图

所谓的灵活使用，简单说就是结合 vue-Baidu-Map和原始的JavaScript的api混合使用，并对跨组件之间地图操作简单介绍！

话不多说，进入正题

首先贴两个链接

1、vue-Baidu-Map官方介绍：https://dafrok.github.io/vue-baidu-map/#/zh/index

2、百度地图官方提供的 JavaScript API: http://lbsyun.baidu.com/index.php?title=jspopular3.0

vue-Baidu-Map 官方提供了较为详细的文档和api，为vue结合百度地图做了很详细的指南和介绍。

对于如何安装、两种注册方法就不copy官方的代码了。

以下是本地工程的代码

<template>
    <!-- 关于标签属性和事件，还是那句话，请移步官方提供的api -->
  <!-- https://dafrok.github.io/vue-baidu-map/#/zh/start/usage -->
    <baidu-map
    :ak="MapOptions.ak"
    :center="MapOptions.center"
    :zoom="MapOptions.zoom"
    :scroll-wheel-zoom="MapOptions.scrollwheelzoom"
    @ready="handler"
    />

</template>

<script>
//按需引入
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
  components: {
    BaiduMap
  },
  data() {
    return {
      map: null,
      bmap: null,
      // 地图参数
      MapOptions: {
        ak: '********',
        // 中心点
        center: { lng: 116.404, lat: 39.915 },
        // 缩放比例
        zoom: 15,
        // 鼠标滚轮缩放
        scrollwheelzoom: true
      },
    }
  },
  methods: {
    handler({ BMap, map }) {
      this.map = map
      this.bmap = BMap
    }
  }
}
</script>

这里主要想说的是ready这个回调方法，最开始在属性中没找到，后来仔细看介绍才发现作者提到，但是一笔带过了。

回调方法中会带有BMap和map两个对象，是不是很熟悉。使用过百度地图JavaScript api的同学一定知道他们是做什么的。

那么既然取到了BMap和map的对象，就可以用他们来做很多事情了！

那么，重点来了！

到底解决了什么问题：

1、可以参照百度地图JavaScript api 实现 vue-Baidu-Map中暂未提供的功能

2、对父子组件之间，可以更加方便的对地图进行操作

这里只简单介绍第2点

继续刚才的代码

parent.vue

<template>
    <!-- 关于标签属性和事件，还是那句话，请移步官方api -->
    <baidu-map
        class="bm-view"
        :ak="MapOptions.ak"
        :center="MapOptions.center"
        :zoom="MapOptions.zoom"
        :scroll-wheel-zoom="MapOptions.scrollwheelzoom"
        @ready="handler"
        @click="clickMap"
    />
    <clild :map="map" :bmap="bmap"/>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import Child from './components/Child.vue'
export default {
  components: {
    BaiduMap,
    Child
  },
  data() {
    return {
      map: null,
      bmap: null,
      // 地图参数
      MapOptions: {
        ak: '*******',
        // 中心点
        center: { lng: 116.404, lat: 39.915 },
        // 缩放比例
        zoom: 15,
        // 鼠标滚轮缩放
        scrollwheelzoom: true
      },
    }
  },
  methods: {
    handler({ BMap, map }) {
      this.map = map
      this.bmap = BMap
    }
  }
}
</script>

Child.vue

<template>
  <div>
    <button @click="dclick()">画点</button> 
  </div>
</template>
<script>
export default {
  name: 'Child',
  props: {
    map: { type: Object, required: true, default: () => {} },
    bmap: { type: Object, required: true, default: () => {} }
  },
  data() {
    return {}
  },
  methods: {
    //在parent中的map上，116.404, 39.915 位置画一个点
    dclick() {
      const BMap = this.bmap
      var point = new BMap.Point(116.404, 39.915)
      var marker = new BMap.Marker(point)
      this.map.addOverlay(marker)
    }
  }
}
</script>

上述代码中，parent.vue中初始化了一个地图，并引入了一个子组件Child 并将bmap和map传入到child中，这样就可以在child中使用这两个对象，对parnet中的地图进行操作了。这样省去了父子组件方法的调用，简化了parent中的代码量！

其中上图操作参考百度地图的JavaScript api ：http://lbsyun.baidu.com/index.php?title=jspopular3.0

总结：

1、vue-Baidu-Map中，地图初始化的回调方法 ready ，其中的BMap 和 map 可以直接使用！

2、在vue中，vue-Baidu-Map 和 百度地图的JavaScript api 可以结合使用，让地图操作更加灵活！