数据可视化大屏项目开发中，需要实现一个效果，就是地图默认显示的是echarts地图，点击对应的地点后，会跳转到百度地图，百度地图缩放以后，重新显示echarts地图。

实现思路

准备两个组件，一个百度组件一个echarts地图组件，通过v-if进行切换。
当echarts地图被点击后，获取经纬度后，传给百度地图，然后通过变量showBdMap切换为百度地图。
当百度地图缩放到一定程度后切换为echarts地图。

切换效果

演示地址

vue 项目echarts地图点击切换百度地图缩放返回echarts地图

百度地图关键代码

监听百度地图的zoomend事件，触发后检测当前地图的zoomLevel如果小于指定数值就传值给父组件进行状态切换。

initMap() {
  // 创建地图实例
  this.map = new BMapGL.Map('container')
  // 创建点坐标
  var point = new BMapGL.Point(this.center[0], this.center[1])
  // 初始化地图，设置中心点坐标和地图级别
  this.map.centerAndZoom(point, 15)
  this.map.setMapStyleV2({
    styleId: '55a1a095168744db6bd54be6015a6547'
  })
  // 开启鼠标滚轮缩放
  this.map.enableScrollWheelZoom(true)
  // 监听地图缩放事件
  this.map.addEventListener('zoomend', () => {
    let zoomLevel = this.map.getZoom();
    if (zoomLevel < 10) {
      // 缩放级别小于10时，向父组件传递当前缩放级别
      this.$emit('zoom-level-changed', zoomLevel);
    }
  });
},

echarts地图

echarts为了方便图标自定义，所以使用的是html方式渲染到echarts图表上的。当点击后，传值给父组件，然后切换地图。

<div
        class="html-icon"
        @click="handleClick(item.value)"
        :style="{left:item.left,top:item.top}" v-for="(item,index) in list" :key="index"
    >
      <span>{{ item.name }}</span>
    </div>

    handleClick (value) {
      // 触发自定义事件，并传递value值给父组件
      this.$emit('item-clicked', value)
    },

更多百度地图相关实例

vue项目中使用百度地图实例

当前效果实例下载

项目基于vue2 webpack js nodejs 16开发