微信小程序地图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设置气泡图标。

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

相关推荐
Boilermaker19923 分钟前
【Java EE】SpringIoC
前端·数据库·spring
中微子14 分钟前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上102429 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y1 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁1 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry1 小时前
Fetch 笔记
前端·javascript
拾光拾趣录1 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟1 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan1 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构