uniapp 小程序地图marker callout如何实现

在uniapp开发小程序时，如何实现地图marker的callout气泡展示？目前按照官方文档配置了markers的callout属性，但气泡始终不显示。请问正确的实现方式是什么？是否需要额外设置样式或触发条件？如果callout不支持，有没有替代方案能达到类似效果？

2 回复

在uniapp中，使用<map>组件的markers属性，设置callout属性即可实现标注气泡。

示例：

markers: [{
  id: 1,
  latitude: 39.909,
  longitude: 116.39742,
  callout: {
    content: '这是气泡内容',
    color: '#fff',
    fontSize: 14,
    borderRadius: 10,
    bgColor: '#007AFF',
    padding: 10,
    display: 'ALWAYS'
  }
}]

注意：callout在不同平台表现可能略有差异。


在 UniApp 中，小程序地图的 marker 气泡（callout）可通过配置 markers 数组的 callout 属性实现。以下是关键步骤和示例代码：

实现步骤：

  1. 定义 markers 数组：每个 marker 对象可包含 callout 属性。
  2. 配置 callout：设置文本内容、颜色、字体大小等样式。
  3. 绑定到地图组件：使用 map 组件的 markers 属性。

示例代码：

<template>
  <view>
    <map 
      :latitude="latitude" 
      :longitude="longitude" 
      :markers="markers"
      style="width: 100%; height: 400px;">
    </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, // 字体大小
            borderRadius: 4, // 边框圆角
            bgColor: "#007AFF", // 背景色
            padding: 8, // 内边距
            display: "ALWAYS" // 显示方式：ALWAYS 常显
          }
        }
      ]
    };
  }
};
</script>

参数说明：

  • content：气泡显示的文本（必填）。
  • color/fontSize：文字样式。
  • bgColor/borderRadius：背景和边框样式。
  • display：支持 "BYCLICK"（点击显示）或 "ALWAYS"（常显）。

注意事项：

  • 确保 latitude 和 longitude 有效，否则 marker 不显示。
  • 不同小程序平台（微信、支付宝等）对样式的支持可能略有差异，需测试调整。

通过以上配置即可实现地图标记的气泡效果。

回到顶部