微信小程序地图callout气泡图标在ios显示，在安卓机不显示

微信小程序地图callout气泡在ios展示，在安卓机不展示

前些时候接到产品需求，昭君村一码游小程序中景点打卡页面地图上需要自定义气泡窗口，结果在开发过程中，发现原本的代码生成的maker在ios机上气泡窗口正常显示，安卓机上没有显示。查看微信官方文档地图map，没能发现问题，后来百度吸收他人经验得知，原来是marker中的alpha值设置为0导致。

问题复现

前面前端开发的同事在使用小程序的marker标记点用于标记展示时，在map的自定义气泡的html代码中，定义了图标图片，见下方.label-icon

js 复制代码

```html
    <map>
      <cover-view
        v-if="customCallout"
        slot="callout"
        @click="customCalloutClick"
      >
        <cover-view
          v-for="(item, i) in markers" :key="i"
          :marker-id="item.id"
          class="custom-callout"
        >
          <cover-view class="label-icon">
            <cover-image class="cover-bg" :src="$imgBaseUrl + '/playToolsPKG/scenic-spot.png'"></cover-image>
          </cover-view>
          <cover-view class="label-text">
            <cover-view class="text ellipsis-1">{{item.positionName}}</cover-view>
          </cover-view>
        </cover-view>
      </cover-view>
    </map>

,这样导致设置地图点位时，由于有个自带的小图标（iconPath未设置值时，会出现一个默认的红色小图标），由于在html的callout中自定义了气泡图片，用不上自带的小图标了，前开发者将 alpha（标注的透明度，默认 1，无透明，范围 0 ~ 1）设置为了0 ，这样隐藏了自带的红色小图标，使用在html中自定义的小图标，最终导致了安卓机的不兼容。

js 复制代码

    // 在地图上显示周围的点位
    setPoints(list = []) {
      this.markers = list.map((item, index) => {
        return {
          ...item, // 保留自定义参数, 用于查询或其他操作
          alpha: 0,
          width: 30,
          height: 34,
          id: item.id ? +item.id.slice(0, 9) : index, //保证有id, 点击时才能显示tip
          latitude: item.latitude,
          longitude: item.longitude,
          count : item.count??0,
          customCallout: {
            display: "ALWAYS",
            anchorX: 0,
            anchorY: 55
          }
        }
      })
    },

解决问题

不扯别的，先说说最终的解决方案：

去掉在html的callout中自定义了气泡图片，在生成maker数组时，alpha设置为1，iconPath设置为我们想要的自定义气泡图片即可。

html 复制代码

    <map
      ref="map"
      id="map"
      v-if="show && $imgBaseUrl"
      style="width: 100%; height: 100%;"
      :markers="markers"
      :show-location="true"
      :latitude="latitude"
      :longitude="longitude"
      :scale="mapScale"
      @regionchange="regionchange"
      @markertap="markertap"
      @callouttap="callouttap"
    >
      <cover-view
        v-if="customCallout"
        slot="callout"
        @click="customCalloutClick"
      >
        <cover-view
          v-for="(item, i) in markers" :key="i"
          :marker-id="item.id"
          class="custom-callout"
        >
          <cover-view class="label-text">
            <cover-view class="text ellipsis-1">{{item.positionName}}</cover-view>
          </cover-view>
        </cover-view>
      </cover-view>
    </map>

js 复制代码

    // 在地图上显示周围的点位
    setPoints(list = []) {
      this.markers = list.map((item, index) => {
        return {
          ...item, // 保留自定义参数, 用于查询或其他操作
          alpha: 1,
          width: 30,
          height: 34,
          iconPath: this.$imgBaseUrl + '/playToolsPKG/scenic-spot.png',
          id: item.id ? +item.id.slice(0, 9) : index, //保证有id, 点击时才能显示tip
          latitude: item.latitude,
          longitude: item.longitude,
          count : item.count??0,
          customCallout: {
            display: "ALWAYS",
            anchorX: 0,
            anchorY: 55
          }
        }
      })
    },

css 复制代码

.custom-callout {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 120px;
  height: 26px;
  overflow: hidden;
  .label-text {
    position: relative;
    box-sizing: border-box;
    padding: 0 8px;
    height: 36px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #595b64;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    .text{
      max-width: 120px;
      font-size: 12px;
      color: #292a2c;
      letter-spacing: 0.62px;
      white-space: nowrap;
      text-align: center;
    }
  }
}

话外延伸

在成功解决这个问题前，其实还尝试过其他方案，但最终还是放弃了，

比如下方的截图，就是在保留了html中自定义了气泡图片的同时，maker中的alpha设置为1，但iconPath未设置和设置后的样子。

1、maker未设置iconPath

2、maker中设置了iconPath

js 复制代码

 iconPath: this.$imgBaseUrl + '/playToolsPKG/scenic-spot.png'

css 复制代码

.custom-callout {
  // background: rgba(0, 0, 0, 0.4); // 用于调试
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 120px;
  height: 80px;
  overflow: hidden;
  .label-icon {
    position: relative;
    width: 30px;
    height: 34px;
    .cover-bg{
      width: 30px;
      height: 34px;
    }
  }
  .label-text {
    position: relative;
    box-sizing: border-box;
    padding: 0 8px;
    height: 24px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #595b64;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    .text{
      max-width: 120px;
      font-size: 12px;
      color: #292a2c;
      letter-spacing: 0.62px;
      white-space: nowrap;
      text-align: center;
    }
  }
}

我们发现，在html中定义的图标会和在js的iconPath中定义的图标不再一个位置上，当时我尝试着通过css控制类.custom-callout，将两个图标重合在一起，

css 复制代码

.custom-callout {
  transform: translateY(24px);
}

在微信开发者工具中OK了，当时一喜，

但是拿到安卓手机上查看，哦，卖糕地，发现居然没有任何变化，还是上下排列着(怀疑是缓存，经过清除缓存，多次测试，还是如此，最终确认不是缓存在作怪)。

因此，在地图中使用callout定义图标气泡可能存在兼容问题，建议大家尽量在js定义maker的时候使用iconPath设置气泡图标。

如果你也遇到同样的问题，有着其他不同的解决方案，请给我留言。，