收藏
回答

微信中的地图组件不好扩展啊,比如自定义的气泡不能使用GIF动图和不支持css3动画?

现在我有一个奇葩的需求就是 在达到某个条件下,使地图上出现闪烁功能,我查看了文档 ,发现没有类似的api,我想到的是 利用微信地图中的自定义
气泡,如下是官网中给的例子

<map
      id="myMap"
      style="width: 100%; height: 300px;"
      latitude="{{latitude}}"
      longitude="{{longitude}}"
      bindmarkertap="markertap"
      bindcallouttap="callouttap"
      bindlabeltap="labeltap"
      markers="{{markers}}"
      scale="16"
    >
      <cover-view slot="callout">
        <block wx:for="{{customCalloutMarkerIds}}" wx:key="*this">
          <cover-view  class="customCallout" marker-id="{{item}}" >
            <cover-image class="icon" src="/image/voice.png"></cover-image>
            <!-- <cover-view class="content"> 
              {{num}}-{{item}}-{{index}}
            </cover-view> -->
          </cover-view>
        </block>
      </cover-view>
    </map>当我把voice.png中的图换成GIF时,在开发者工具是正常没问题,但是我用手机真机调试发现不显示或者 显示GIF图的一个片段
s使了好久不行后, 我想到css动画 于是我添加了动画


@keyframes newsBtn
{
    0% { box-shadow: 0px 0px 0px 0px rgba(0,0,0,0),0px 0px 0px 1px rgba(230,0,18,0); }
    10%{ box-shadow: 0px 0px 0px 1px rgba(0,0,0,0), 0px 0px 0px 2px rgba(230,0,18,0.1);}
    20%{ box-shadow: 0px 0px 0px 2px rgba(0,0,0,0), 0px 0px 0px 4px rgba(230,0,18,0.2);}
    40%{ box-shadow: 0px 0px 0px 0px rgba(0,0,0,0), 0px 0px 0px 1px rgba(230,0,18,0.1),0px 0px 0px 4px rgba(0,0,0,0), 0px 0px 0px 6px rgba(230,0,18,0.3);}
    50%{ box-shadow: 0px 0px 0px 1px rgba(0,0,0,0), 0px 0px 0px 3px rgba(230,0,18,0.2),0px 0px 0px 5px rgba(0,0,0,0), 0px 0px 0px 8px rgba(230,0,18,0.4);}
    60%{ box-shadow: 0px 0px 0px 2px rgba(0,0,0,0), 0px 0px 0px 5px rgba(230,0,18,0.3),0px 0px 0px 6px rgba(0,0,0,0), 0px 0px 0px 10px rgba(230,0,18,0.5);}
    70%{ box-shadow: 0px 0px 0px 3px rgba(0,0,0,0), 0px 0px 0px 6px rgba(230,0,18,0.4),0px 0px 0px 7px rgba(0,0,0,0), 0px 0px 0px 11px rgba(230,0,18,0.4);}
    80%{ box-shadow: 0px 0px 0px 4px rgba(0,0,0,0), 0px 0px 0px 7px rgba(230,0,18,0.3),0px 0px 0px 8px rgba(0,0,0,0), 0px 0px 0px 12px rgba(230,0,18,0.3);}
    90%{ box-shadow: 0px 0px 0px 5px rgba(0,0,0,0), 0px 0px 0px 6px rgba(230,0,18,0.2),0px 0px 0px 9px rgba(0,0,0,0), 0px 0px 0px 13px rgba(230,0,18,0.2);}
    100%{ box-shadow: 0px 0px 0px 7px rgba(0,0,0,0), 0px 0px 0px 7px rgba(230,0,18,0.1),0px 0px 0px 10px rgba(0,0,0,0), 0px 0px 0px 14px rgba(230,0,18,0);}
}
g跟地图一样的情况,真机调试也不行,开发者工具就没问题
为什么工具和设备会有这么大的差距???  为什么文档上找不到任何相关的说明??
微信版本:7.0.21
手机型号:oppo 华为 苹果 都有
基础库:2.13.0
回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容
问题标签