百度地图监听缩放和拖拽

需求场景是，地图标记需要定时刷新，但是，每次更新数据标点，上一次缩放和拖拽会重新恢复最开始的样子，这时候就需要监听缩放和拖拽的值，在下一次更新的时候赋值进去，就可以完成，数据刷新也不会影响。提高用户体验

我们首先要用到百度地图提供的api，来进行监听地图缩放和拖拽的位置，并取值

   data() {
    return {
      //存储地图状态
      mapState: {
        zoom: 6, // 地图的默认缩放级别
        center: { lat: 116.404, lng: 39.915 }, // 默认中心位置
      },
    };
  },
  methods: {
     getmap() {
       // 创建地图实例
       this.map = new BMap.Map('map'); 
       // 设置中心点坐标和地图缩放级别
       this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 6);
       this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
       this.map.setMapType(BMAP_SATELLITE_MAP); // 设置卫星地图
       // 添加缩放事件监听器
       this.map.addEventListener('zoomend', () => {
          let zoom = this.map.getZoom();
          this.mapState.zoom = zoom;
          console.log('地图缩放至：' + this.map.getZoom() + '级');
       });
       
       // 拖拽结束事件
       this.map.addEventListener('dragend', () => {
         let center = this.map.getCenter();
         this.mapState.center = center;
         console.log('地图中心点变更为：' + center.lng + ', ' + center.lat);
       }); 
     },
     
     // 设置定时器来周期性刷新点位
    setRefreshTimer() {
      const interval = 5000; // 定时刷新间隔，例如 10 秒
      this.refreshTimer = setInterval(() => {
          // 刷新点位的逻辑...
          //...
          
          // 恢复之前的地图状态
          this.map.setZoom(this.mapState.zoom);
          this.map.setCenter(this.mapState.center);
      }, interval);
    },
  }
   

每当用户缩放或者拖拽地图时，上述的事件监听器就会被触发，并执行定义的函数。在这些函数中，可以添加自己的逻辑，例如获取缩放级别，获取地图新的中心点，或者根据这些事件进行其他的操作。

这样设置后，定时器再刷新，获取新的点位数据，可以直接渲染，不会改变用户之前的缩放级别和中心点，给予用户良好的体验。