uni-app map组件的circles的fillColor和color属性在h5模式下透明度设置无效

示例代码：

<template>
<view>
<map class="w-main-window h-100vh" :longitude="121.948755" :latitude="29.894684" :scale="12"  :circles="data.circles" />
</view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
const data = reactive({
circles: [{
latitude: 29.894684,
longitude: 121.948755,
radius: 1000,
fillColor: '#000000AA'
}])
</script>

操作步骤：

如图

预期结果：

圆圈颜色黑色，透明度AA

实际结果：

圆圈颜色蓝色

bug描述：

按文档设置的颜色#000000AA，应该是黑色的然后透明的AA，但是表现出来的却是#0000AA蓝色，它取了后面6位。

开发环境	版本号	项目创建方式
Mac	13.6.1	HBuilderX
HBuilderX	3.98
浏览器	版本号
Chrome	119.0.6045.105

sinazl 1楼•14 天前

感谢反馈，参考https://ask.dcloud.net.cn/question/159809

wuwangju 2楼•14 天前

感谢

itying888 3楼•14 天前

在 uni-app 的 map 组件中，circles 属性用于在地图上绘制圆形区域。circles 对象中的 fillColor 和 color 属性分别用于设置圆形的填充颜色和边框颜色。这些颜色值通常可以使用十六进制颜色码或 RGBA 格式来指定，其中 RGBA 格式中的 A（Alpha）用于设置颜色的透明度。

然而，在 H5 模式下，fillColor 和 color 的透明度设置可能会遇到问题，导致透明度无效。这通常是由于 H5 平台下地图组件的实现方式与原生平台不同所致。

解决方案

检查颜色格式：确保你使用的是正确的 RGBA 格式，例如 rgba(255, 0, 0, 0.5)，其中 0.5 表示 50% 的透明度。
使用十六进制颜色码：如果你使用的是十六进制颜色码，可以尝试在颜色码后添加两位表示透明度的值。例如，#FF000080 表示红色，透明度为 50%。
检查平台差异：由于 H5 平台和原生平台的地图组件实现不同，某些属性在 H5 平台上可能无法完全支持。你可以在 uni-app 的官方文档或社区中查找是否有关于此问题的已知限制或解决方案。

使用条件编译：如果你需要在不同平台上实现不同的效果，可以使用 uni-app 的条件编译功能。例如：

// #ifdef H5
circles: [
    {
        latitude: 39.908,
        longitude: 116.397,
        color: '#FF0000', // 在 H5 平台上使用不透明的颜色
        fillColor: '#FF0000',
        radius: 1000
    }
]
// #endif

// #ifndef H5
circles: [
    {
        latitude: 39.908,
        longitude: 116.397,
        color: 'rgba(255, 0, 0, 0.5)', // 在其他平台上使用透明的颜色
        fillColor: 'rgba(255, 0, 0, 0.5)',
        radius: 1000
    }
]
// #endif

反馈给开发者社区：如果以上方法都无法解决问题，可以尝试在 uni-app 的官方论坛或 GitHub 仓库中反馈问题，寻求开发者的帮助。

示例代码

<template>
  <view>
    <map :circles="circles" style="width: 100%; height: 300px;"></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      circles: [
        {
          latitude: 39.908,
          longitude: 116.397,
          color: 'rgba(255, 0, 0, 0.5)', // 边框颜色，50% 透明度
          fillColor: 'rgba(255, 0, 0, 0.5)', // 填充颜色，50% 透明度
          radius: 1000 // 半径，单位：米
        }
      ]
    };
  }
};
</script>