uniapp 地图标记点图片大小如何调整

在uniapp中使用地图组件时，如何调整标记点（marker）的图片大小？我在设置iconPath后，发现图片显示过大或过小，尝试修改width/height属性但无效。请问正确的尺寸调整方式是什么？是否需要通过CSS控制还是其他API参数？

2 回复

在 markers 数组的每个标记对象中，设置 width 和 height 属性即可调整图片大小。例如：

markers: [{
  iconPath: '/static/marker.png',
  width: 30,
  height: 30
}]

在 UniApp 中调整地图标记点（Marker）的图片大小，可以通过设置 iconPath 对应的图片尺寸，并结合 width 和 height 属性实现。以下是具体方法：

步骤：

  1. 准备图片：确保 iconPath 使用的图片路径正确（支持本地和网络图片）。
  2. 设置 width 和 height：在 markers 数组中为每个 Marker 指定 width 和 height（单位：px），控制显示尺寸。

示例代码：

// 在 data 中定义 markers
data() {
  return {
    markers: [{
      id: 1,
      latitude: 39.909,
      longitude: 116.39742,
      iconPath: '/static/marker.png', // 替换为你的图片路径
      width: 30,  // 调整宽度（px）
      height: 40  // 调整高度（px）
    }]
  };
}

注意事项：

  • 单位：width 和 height 的单位是像素（px），无需写单位。
  • 图片比例：建议按原图比例调整，避免拉伸变形。
  • 性能：图片尺寸不宜过大，否则可能影响地图加载性能。

通过修改 width 和 height 数值即可灵活控制标记点大小。

回到顶部