uniapp map circles 如何设置 fillcolor 颜色

在uniapp中使用map组件时，circles的fillColor属性应该如何设置颜色？我尝试了直接写颜色名称和十六进制值都无效，请问正确的写法是什么？

2 回复

在 circles 数组中，每个 circle 对象里设置 fillColor 属性，值为十六进制颜色代码或颜色名。例如：

circles: [{
  latitude: 39.908823,
  longitude: 116.397470,
  fillColor: '#FF0000'
}]

支持透明度：#80FF0000（红色半透明）。


在 UniApp 中，<map> 组件的 circles 属性用于在地图上绘制圆形覆盖物。fillColor 用于设置圆形的填充颜色，支持以下格式：

  1. 十六进制颜色值：例如 "#FF0000" 表示红色。
  2. RGB 颜色值：例如 "rgb(255, 0, 0)"。
  3. 颜色名称：例如 "red"（但建议使用十六进制或 RGB 确保兼容性）。

示例代码

在 Vue 文件中配置 circles 数组，并设置 fillColor：

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

<script>
export default {
  data() {
    return {
      latitude: 39.909, // 地图中心纬度
      longitude: 116.397, // 地图中心经度
      circles: [
        {
          latitude: 39.909,    // 圆心纬度
          longitude: 116.397,  // 圆心经度
          color: '#FF0000',    // 边缘线颜色（可选）
          fillColor: '#00FF00', // 填充颜色（关键属性）
          radius: 500,         // 半径（米）
          strokeWidth: 2       // 边缘线宽度（可选）
        }
      ]
    };
  }
};
</script>

注意事项：

  • 透明度：如需半透明效果，可在十六进制颜色中添加 Alpha 通道，例如 "#8000FF00"（前两位 80 表示透明度）。
  • 平台差异：不同小程序平台对颜色格式的支持可能略有差异，建议使用十六进制。
  • 动态修改：可通过响应式数据更新 circles 数组实时改变颜色。

通过以上配置，即可自定义地图圆形的填充颜色。

回到顶部