微信小程序marker 上的自定义气泡cover-view字体丢失以及max-width不生效问题

前言：

之前我写了一篇关于解决cover-view宽度无法自适应的文章，在解决完宽度自适应问题，又出现了其他问题…

项目场景：

微信小程序地图自定义气泡，虽然目前原生组件均已支持同层渲染，但是根据官网描述自定义气泡只能使用cover-view。

---

问题描述

简单说下需求：要求是起终点地址描述最多7个字超出换行，真机效果如下图，模拟器展示没问题。

cover-view字体丢失、max-width不生效

---

解决方案：

1.cover-view字体丢失

wxml代码

<cover-view id="distanceViewParent" style="width: {
   
   {distanceViewWidth}};" class="c-ff6b mapview-marker-l">
  <cover-view id="distanceView" style="width: {
   
   {distanceChildViewWidth}};" class="font-size-14 font-w-bold">
    {
   
   {
   
   carTotal.distance}}公里
  </cover-view>
  <cover-view class="font-size-12 text-center" style="margin-top: 3rpx;">全程</cover-view>
</cover-view>

js文件代码

const {
   
   
  getSelectorQuery
}