uni-app高德地图点标记样式问题

uni-app高德地图点标记样式问题

开发环境 版本号 项目创建方式
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 Windows 10 家庭中文版 22H2
HBuilderX类型 正式
HBuilderX版本号 4.57
手机系统 Android
手机系统版本号 Android 8.1
手机厂商 小米
手机机型 mi max3
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码：

{
id: config.id,
latitude: position.latitude,
longitude: position.longitude,
iconPath: iconCanvas.tempFilePath,
callout: {
display: 'ALWAYS',
content: content,
color: '#FFFFFF',
bgColor: '#333333',
padding: 2,
borderRadius: 4,
borderWidth: 2
}
}

操作步骤：

  • 点击地图添加点标记

预期结果：

  • 添加点标记连气泡框都要显示，样式要能设置

实际结果：

  • 添加点标记只有点标记图标，没有气泡框，需要点击点标记才展示气泡框

bug描述：

高德地图的marker下callout的display设了ALWAYS还是无效，anchor值也是无效


更多关于uni-app高德地图点标记样式问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

hello , 看文档，display和anchor 同时用，只能是在微信小程序上才支持的 https://uniapp.dcloud.net.cn/component/map.html#map

更多关于uni-app高德地图点标记样式问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


关于uni-app高德地图点标记气泡框显示问题，这是高德地图SDK的限制。根据高德地图官方文档，callout的display参数在Android平台上确实存在不生效的情况，这是已知问题。

解决方案建议：

  1. 使用自定义marker图标，将气泡内容直接绘制在图标上
  2. 改用label属性替代callout，设置permanent为true实现常显效果
  3. 监听marker点击事件，手动控制气泡显示

修改后的代码示例：

{
  id: config.id,
  latitude: position.latitude,
  longitude: position.longitude,
  iconPath: iconCanvas.tempFilePath,
  label: {
    content: content,
    color: '#FFFFFF',
    bgColor: '#333333',
    padding: 2,
    borderRadius: 4,
    borderWidth: 2,
    display: 'ALWAYS'  // 使用label的display参数
  }
}
回到顶部