cover-view在安卓端不能正常显示,

用uniapp写的项目,然后要运行到安卓基座上,用了地图组件 现在需求是在MAP上面要显示一些图片和文字还有弹窗,

img


cover-view像上图那样嵌套内容就显示不出来,如果像下图这样

img


在地图上面就能显示
求解决方法

在 Uniapp 中,使用 cover-view 组件与地图 <map> 组件来实现地图上显示图片和文字,以及弹窗功能的代码示例如下:

页面代码:

<template>
  <view>
    <map :latitude="latitude" :longitude="longitude" :scale="scale" :markers="markers">
      <cover-view class="cover-view-marker" :style="{left: marker.iconPath[0]}">
        <image :src="marker.iconPath[1]" :style="{width: '32px', height: '32px'}"/>
        <view class="cover-view-text" :style="{left: marker.textPath[0]}">{{marker.textPath[1]}}</view>
      </cover-view>
    </map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 31.23,
      longitude: 121.47,
      scale: 14,
      markers: [
        {
          id: 0,
          latitude: 31.23,
          longitude: 121.47,
          iconPath: ['20px', 'path/to/icon'],
          textPath: ['60px', 'This is a marker']
        },
      ]
    }
  }
}
</script>

<style>
.cover-view-marker {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.cover-view-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #333;
  font-size: 14px;
}
</style>

说明:

  • <map> 组件用于显示地图,通过 latitudelongitudescalemarkers 属性控制地图的显示。
  • <cover-view> 组件用于在地图上显示图片和文字,通过设置样式实现图片和文字的显示。
不知道你这个问题是否已经解决, 如果还没有解决的话:

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^