我在使用map里面的自定义气泡的时候，出现了cover-image图片和气泡本身错位的情况（微信小程序模拟器没有复现，真机的情况下大概率会出现这种错位，然后点击图片之后，图片又会回到气泡上，然后再次点击可能会造成图片消失）,另外点击气泡之后本来应该出现的动画也没有（模拟器动画没有失效，但是真机测试失效）

[TenXLL]

我贴一下源码：

this.mapPointList = list.map((item) => {
        return {
          id: item.userId,
          latitude: item.latitude,
          longitude: item.longitude,
          height: 50,
          width: 45,
          iconPath: '/static/icon/Unionbg-unit.png',
          customCallout: {
            anchorY: 37,
            anchorX: 1,
            display: 'ALWAYS',
            avatar: '/static/whZ0vKRX5lwhucPix7e7NPsRKc99OOs1.jpg'
          },
          joinCluster: true
        }
      })

<template>
  <view>
    <!-- 底部地图 -->
    <view :class="['mapBtm', isComplete ? 'nocomplete' : 'complete']">
      <map
        id="map"
        class="map"
        :scale="mapScale"
        :show-location="true"
        :latitude="latitude"
        :longitude="longitude"
        :markers="covers"
        :enable-overlooking="overlooking"
        :enable-building="true"
        @callouttap="markerTap"
        @regionchange="regionChange"
        @updated="completed"
      >
        <cover-view slot="callout">
          <block v-for="(item, index) in covers" :key="index">
            <cover-view
              :marker-id="item.id"
              :class="item.id === currentMarkerId ? 'customCallout' : ''"
              style="height: 30px"
            >
              <cover-view
                class="position-relative"
                style="width: 30px; height: 30px"
              >
                <cover-image
                  class="position-absolute"
                  style="
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    z-index: 999;
                  "
                  :src="item.customCallout.avatar"
                ></cover-image>
              </cover-view>
            </cover-view>
          </block>
        </cover-view>
      </map>
    </view>

    <!-- 加载 -->
    <u-loading-page
      loading-text="地图加载中..."
      :loading="!isComplete"
    ></u-loading-page>
  </view>
</template>

<script>
export default {
  props: {
    // 经纬度
    latitude: [Number, String],
    longitude: [Number, String],
    covers: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      //   地图加载状态
      isComplete: false,
      // 展示回到当前位置按钮
      isGoBack: false,
      //   地图
      id: 0, // 使用 marker点击事件 需要填写id
      mapScale: 12,
      // 当前点id
      currentMarkerId: 0,
      overlooking: false
    }
  },
  methods: {
    // 点击地图标记点平移至中心
    async markerTap(e) {
      this.currentMarkerId = e.markerId
      let tapPoint = null
      await this.covers.forEach((item) => {
        // this.scale = 16;
        if (item.id === e.markerId) {
          tapPoint = item
        }
      })

      this._mapContext.moveToLocation({
        latitude: tapPoint.latitude,
        longitude: tapPoint.longitude
      })
      // 让swiper切换到当前的marker
      const index = this.covers.findIndex((item) => item.id === e.markerId)
      this.$emit('change', index, tapPoint)
    },
    // 地图加载完成显示
    completed() {
      if (!this.isComplete) {
        // 只触发一次
        this.isComplete = true
        this.overlooking = true
        this.$emit('complete', true)
      }
    },
    // 移动到当前位置
    moveToLocation() {
      // this.scale = 14;
      this._mapContext.moveToLocation({
        complete: (res) => {
          this.isGoBack = false
        }
      })
    },
    moveToLocationByLatAndLng(lat, lng) {
      this._mapContext.moveToLocation({
        latitude: lat,
        longitude: lng
      })
    },
    // 在地图中显示所有已知位置的最佳视野
    includePoints() {
      this._mapContext.includePoints({
        padding: [150], // 缩放视野padding
        points: this.covers,
        success: (res) => {
          console.log(res)
        }
      })
    },
    // 地图视野发生变化
    regionChange(e, state = false) {
      if (e.type === 'end') {
        this.isGoBack = true
      }
    },
    initCluster() {
      // 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
      this._mapContext.initMarkerCluster({
        enableDefaultStyle: true,
        zoomOnClick: true,
        gridSize: 10,
        complete(res) {
          console.log('initMarkerCluster', res)
        }
      })
    },
    // 添加点聚合
    addMarkers() {
      // 在this.covers中给每个对象添加一个属性joinCluster: true
      this._mapContext.addMarkers({
        markers: this.covers,
        // 清除所有点
        // clear: true,
        complete(res) {
          console.log('addMarkers', res)
        }
      })
    }
  },
  created() {
    this._mapContext = uni.createMapContext('map', this)
    // 初始化聚合
    this.initCluster()
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
.mapBtm {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  //   z-index: 0;
}
.component {
  z-index: 999;
}
.map {
  /* flex: 1; */
  height: 100vh;
  width: 100%;
}
.complete {
  opacity: 0;
}
.nocomplete {
  transition: all 2s;
  opacity: 1;
}
.customCallout {
  border-radius: 50%;
  /* 发散小幅度蓝色展开收缩波纹持续动画 */
  animation: ripple 2s infinite;
}
@keyframes ripple {
  0% {
    box-shadow:
      0 0 0 0 rgba(0, 136, 255, 0.3),
      0 0 0 0 rgba(0, 136, 255, 0.3),
      0 0 0 0 rgba(0, 136, 255, 0.3),
      0 0 0 0 rgba(0, 136, 255, 0.3);
  }
  100% {
    box-shadow:
      0 0 0 4px rgba(0, 136, 255, 0),
      0 0 0 8px rgba(0, 136, 255, 0),
      0 0 0 16px rgba(0, 136, 255, 0),
      0 0 0 32px rgba(0, 136, 255, 0);
  }
}
</style>

[Otto-J]

检查下编译产物是否符合预期，模拟器可以，真机不可以，可以和对应小程序社区平台进行反馈