解决百度地图marker点设置动态图GIF，会自动转成静态图

最近遇到了一个需要在百度地图上打marker点，使用的是动态图gif，结果发现gif不会动，上网查看才知道百度会自动转成静态图片。

网上只给出了具体的原因和方法，没有给出详细步骤。

1.实例化地图，然后开肝。

<template>
    <div class="bmap" id="container"></div>
</template>
<script lang="ts">
import { defineComponent, ref, nextTick, onMounted } from 'vue';
export default defineComponent({
  setup() {
    const BMap = (window as any).BMapGL;
    const map = ref<any | HTMLElement>(null);
     /**
     * 初始化marker
     * params{}  img为打点图片,因为需要的是背景图片，所以把原标记去掉
     * params{}  point为打点经纬度
     * params{}  type为类型，需要根据不同类型设置不同的背景图片，如果只有一种marker,type可以不需要
     */
    const initMarker = async (img, point, type) => {
      // 创建小车图标
      var myIcon = new BMap.Icon('img', new BMap.Size(52, 26));
      // 创建Marker标注，使用小车图标
      var pt = new BMap.Point(...point);
      var marker = new BMap.Marker(pt, {
        icon: myIcon,
      });
      marker.addEventListener('click', function () {
        alert('您点击了标注' + type);
      });
      // 将标注添加到地图
      map.value.addOverlay(marker);
      // 因为要在marker实例化之后改变名称，故加个延迟执行
      setTimeout(() => {
        // 获取dom元素
        let dom = document.querySelector('.BMap_noprint');
        // 根据type，赋值不同的className
        if (type == 'yj') {
          dom.className = 'yj';
        }
        if (type == 'sxt') {
          dom.className = 'sxt';
        }
      }, 500);
    };
    /**
     * onMounted
     */
    onMounted(async () => {
      map.value = new BMap.Map('container');
      var point = new BMap.Point(119.922883, 32.456692);
      map.value.centerAndZoom(point, 15);
      map.value.enableScrollWheelZoom(true);
      map.value.addEventListener('click', function (e: any) {
        console.log('点击的经纬度：' + e.point.lng + ',' + e.point.lat); //
      });
      
      // type为；‘yj’
      await initMarker(``, [119.912883, 32.446692], 'yj');
      // type为；‘sxt’
      await initMarker(``, [119.922883, 32.456692], 'sxt');
    });
  },
});

<style lang="less" scoped>
:deep(.yj) {
  background-image: url(/@/assets/images/yj.gif) !important;
  background-size: 100% 100%;
  width: 60px !important;
  height: 60px !important;
}
:deep(.sxt) {
  background-image: url(/@/assets/images/sxt.png) !important;
  background-size: 100% 100%;
  width: 60px !important;
  height: 60px !important;
}
<style>

2.效果图