uni-app map组件 markers的iconPath无法使用网络图片 并且width height设置无效

uni-app map组件 markers的iconPath无法使用网络图片 并且width height设置无效

类别 信息
产品分类 uniapp/App
PC开发环境 Mac
PC版本号 11.2.2
HBuilderX 正式
HBuilderX版本 3.1.9
手机系统 iOS
手机版本号 IOS 14
手机厂商 苹果
手机机型 iphone 11
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

示例代码：

{
iconPath: 'https://pg.yxle.net/o_1e5um7oud16db1abk1knje2h15qep.png',
id: 1,
latitude: 0,
longitude: 0,
width: 30,
height: 30,
callout: {
content: '',
color: '#000',
fontSize: '24rpx',
borderRadius: 10,
bgColor: '#fff',
borderColor: '#DCDDDD',
padding: 10,
textAlign: 'center',
display: 'ALWAYS'
}
}

操作步骤：

直接使用map组件 然后设置一下markers就可以了

预期结果：

小程序网络图片和width height都没有问题的

实际结果：

就app不行

bug描述：

不管怎么调都是无效。。。


更多关于uni-app map组件 markers的iconPath无法使用网络图片 并且width height设置无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

请问下解决了吗

更多关于uni-app map组件 markers的iconPath无法使用网络图片 并且width height设置无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


19年的问题了，23年都没解决吗？

没想到24年也还遇见一样的问题，还是没解决

都快25年了同样遇到这个问题

已经25年了，同样的问题没解决

文档说明width和height生效要nvue页面，width和height要设置为字符串类型，iconPath文档未说明支持url

如果还有问题，可以参考这个类似的帖子，https://ask.dcloud.net.cn/question/102601

在 uni-app 的 App 端，map 组件的 markers 确实存在一些限制。根据官方文档和实际验证，App 端（iOS/Android）的 marker 图标不支持直接使用网络图片 URL，必须使用本地路径。同时，width 和 height 属性在 App 端可能不生效，图标会以实际图片尺寸显示。

解决方案：

  1. 图标路径问题：将网络图片下载到本地，使用本地路径。可以通过 uni.downloadFile 下载图片到临时目录，再设置 iconPath 为本地临时路径。
  2. 尺寸问题：App 端通常忽略 width/height，建议直接使用符合尺寸要求的图片资源，避免动态缩放。

示例调整：

// 下载图片并更新 markers
uni.downloadFile({
  url: 'https://pg.yxle.net/o_1e5um7oud16db1abk1knje2h15qep.png',
  success: (res) => {
    if (res.statusCode === 200) {
      this.markers[0].iconPath = res.tempFilePath;
      // 重新设置 markers
      this.markers = [...this.markers];
    }
  }
});
回到顶部