uniapp 地图 callout 的使用方法

在uniapp中如何正确使用地图的callout功能？我在开发过程中尝试添加callout，但总是无法显示或者样式错乱，有没有具体的代码示例和实现步骤可以参考？

2 回复

在uniapp中使用地图callout，可在markers数组中配置callout属性，包含content（内容）、color、fontSize等。示例：

markers: [{
  callout: {
    content: '提示文本',
    color: '#ff0000',
    fontSize: 14
  }
}]

注意：callout会覆盖title显示，且不同平台样式可能略有差异。


在 UniApp 中使用地图组件的 callout 可以在地图标记点上显示自定义的气泡信息窗口。以下是具体使用方法：

1. 基本用法

在 map 组件中，通过 markers 数组配置标记点，每个标记点的 callout 对象用于定义气泡窗口。

示例代码：

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

<script>
export default {
  data() {
    return {
      latitude: 39.909,
      longitude: 116.397,
      markers: [{
        id: 1,
        latitude: 39.909,
        longitude: 116.397,
        title: "北京市",
        callout: {
          content: "北京市中心", // 气泡内容
          color: "#ffffff",     // 文字颜色
          fontSize: 14,         // 文字大小
          bgColor: "#007AFF",   // 背景色
          padding: 10,          // 内边距
          borderRadius: 4,      // 圆角
          display: "ALWAYS"     // 显示方式：ALWAYS 常显
        }
      }]
    };
  }
};
</script>

2. 关键属性说明

  • content：气泡显示的文本内容（必填）。
  • color：文字颜色（默认黑色）。
  • fontSize：文字大小（默认14）。
  • bgColor：背景颜色（默认白色）。
  • padding：内边距（默认5）。
  • borderRadius：圆角半径（默认0）。
  • display：显示方式，可选 "BYCLICK"（点击显示）或 "ALWAYS"（常显）。

3. 动态更新

可通过修改 markers 数据动态更新 callout 内容：

// 修改气泡内容
this.markers[0].callout.content = "更新后的内容";
this.markers = [...this.markers]; // 触发视图更新

注意事项

  • 微信小程序中部分样式属性可能受限，需实测调整。
  • 多个标记点同时显示 callout 时，建议使用 display: 'BYCLICK' 避免重叠。

通过以上配置即可实现地图标记点的信息气泡展示。

回到顶部