uniapp 使用map组件设置markers属性在app中大小无效如何解决？

在使用uniapp的map组件时，设置了markers属性，但在App中marker的大小没有生效，显示效果与预期不符。尝试调整了width和height参数，但依然无效。请问该如何解决这个问题？是否需要特殊配置或使用其他属性来控制marker大小？

2 回复

在App中，map组件的markers大小设置无效，通常是因为App端对markers的iconPath有特殊要求。建议：

  1. 使用绝对路径或网络图片
  2. 图片尺寸建议32px*32px
  3. 可尝试设置width/height属性
  4. 真机调试查看效果

如果还是无效，可能是平台兼容性问题，建议使用uni.createMapContext动态更新markers。


在uni-app中使用map组件设置markers属性时，如果在App平台遇到markers大小设置无效的问题，通常可以通过以下方法解决：

解决方案：

  1. 使用iconPath属性：确保markers的iconPath使用本地图片路径，并控制图片本身的尺寸。
  2. 添加width和height属性：在marker对象中明确指定width和height（单位：px）。

示例代码：

// 在data中定义markers
data() {
  return {
    markers: [{
      id: 1,
      latitude: 39.909,
      longitude: 116.39742,
      iconPath: '/static/marker.png', // 本地图片路径
      width: 30,  // 明确设置宽度
      height: 30  // 明确设置高度
    }]
  }
}

注意事项：

  • 图片建议使用PNG格式，尺寸不宜过大（推荐50x50像素以内）。
  • 如果问题依然存在，尝试在onReady生命周期中动态设置markers。
  • 检查H5或其他平台是否正常，以排除代码逻辑问题。

此方法在App端通常可有效控制marker显示尺寸。

回到顶部