uni-app map组件 markers 设置大小（width， height）无效，除了自己去改图片大小还有别的办法吗？

发布于 1周前 作者 bupafengyu 来自 Uni-App

uni-app map组件 markers 设置大小（width， height）无效，除了自己去改图片大小还有别的办法吗？

示例代码：

let mark = {  
    id: item.parkingCode,  
    latitude: item.latitude,  
    longitude: item.longitude,  
    iconPath: '',  
    title: item.parkingName,  
    width: 200,  
    height: 200  
}

操作步骤：

无

预期结果：

无

实际结果：

无

bug描述：

map组件，markers 设置大小（width， height）无效，我目前的办法就是自己用PS去更改图片的大小，但是这个方法很鸡肋。有没有其他方法，页面是nvue，启动fast。如果是bug希望官方能提供解决办法

开发环境 版本号 项目创建方式
Windows 10 HBuilderX
Android Android 10 一加6

Harmonyos Next教程
36 回复

一样的问题，官方的回复真是一言难尽


补充一下我的解决方案，把图片改小就行了！！！ 不要用svg就用图片。

2024年3月26日，app自定义图标大小问题还是没有解决

6月17日，遇到同样的bug了，微信小程序工具正常，真机调试没有改变大小

7月24日，遇到了同样的bug

测试正常
<template>
<view class="content">
<map id="map1" class="map1" show-location="true" :latitude="latitude" :longitude="longitude" scale="16" :markers="markers">
</map>
</view>
</template>

<script> export default { data() { return { title: 'Hello', showCoverView: true, latitude: 39.925539, longitude: 116.279037, image: "/static/logo.png", markers: [{ id: 110, iconPath: '/static/logo.png', latitude: 39.925539, longitude: 116.279037, width: "20", height: "20" }] } }, onLoad() { }, methods: { } } </script> <style> .content { display: flex; flex-direction: column; flex: 1; } .map1 { flex: 1; } </style>

我也遇到了这个问题，最新版本的HbuilderX,，真机调试时，设置标记点大小无效

标记点的 title 设置也是无效，点击marker没有显示

回复 1***@163.com: 用上面的测试代码验证下是否正常

H5可以，真机调试不行

回复 DCloud_uni-ad_HDX: app无效

文档里width， height是Number类型， 但是设置String类型才生效， 坑人啊

回复 dengzy666: 大佬，我这设置了是string类型依然没效果。是手机型号的问题吗

如果不设置iconPath的情况下能修改标记点大小么？我试了下是不行

真不行！！！ iconfont的icon放上去，width，height都是20（Number/String）都不行！！！ 贼大这个图标！！

app无效路过 128 还是 32都没有变化，，，

文档上显示的参数类型是Number，事实证明，Number类型会报错或者无效，数字类型的字符串可以，如’30’

的确是无效，H5上可以， 但 APP 上不行 ~~

我也出现了 只能自己修改图片尺寸了

手动修改图片的话在不同手机显示大小会随着手机的分辨率大小变化怎么整

2023年了，依然没有解决

2023年9月了，还没解决呢。有大佬解决么

用.nvue文件问题都解决了

23年11月了，依然不行，数字，字符都试过了，都是不行，附代码与效果图



加1，23年11月20日，app上还是没办法设置大小，只能改图片大小

用.nvue文件问题都解决了

23年11月22日，app上还是没办法设置大小，只能改图片大小

用.nvue文件问题都解决了

回复 4***@qq.com: 用nvue, 我用this.markers[idx]动态改width 和 height 也不生效哦

2024.8.30 地图设置markers宽度高度依旧在真机上不生效

app map组件使用nvue,marks和点聚合可以实现, 但自定义tabbar突出部分无法显示; map组件使用vue,marks图片大小无法设置;

2024-12-7 14:16:08 , 我也遇到这样的问题, 有解决方法的人吗

蹲一个，我的多个点，图标只显示最后一个点的图标

12.16同样问题，官方能不能解决一下子

将map组件所在文件改为nvue文件 宽、高参数类型设置为string类型即可

在 uni-app 中使用 map 组件时，确实会遇到 markers 的 width 和 height 属性无效的问题。这是因为 uni-app 的 map 组件是基于原生地图服务封装的，而原生地图服务对 markers 的大小控制通常是通过图标图片本身来实现的。虽然不能直接通过属性设置 markers 的大小，但我们可以通过其他方法来实现对 markers 大小的调整，而不必手动修改图片大小。

以下是一个使用自定义图标并通过样式控制大小的示例代码：

<template>
  <view>
    <map
      id="map"
      :latitude="latitude"
      :longitude="longitude"
      scale="14"
      :markers="markers"
      style="width: 100%; height: 500px;"
    ></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.908823, // 北京的纬度
      longitude: 116.397470, // 北京的经度
      markers: [
        {
          id: 1,
          latitude: 39.908823,
          longitude: 116.397470,
          iconPath: '/static/markers/custom-marker.png', // 自定义图标路径
          width: 50, // 这里的 width 和 height 属性虽然无效，但用于说明意图
          height: 50, // 同上
          // 使用 anchor 属性来控制图标的锚点，确保图标显示正确
          anchor: { x: 0.5, y: 1 }
        }
      ]
    };
  }
};
</script>

<style scoped>
/* 这里无法直接控制 map markers 的大小，但可以通过调整图标图片本身的大小来实现 */
/* 可以在设计图标时就设定好需要的大小，或者在引入前使用图像处理工具调整大小 */
</style>

虽然直接在 markers 对象中设置 width 和 height 无效，但你可以通过以下方式间接实现：

  1. 预处理图标：在设计或引入图标前，使用图像处理工具（如 Photoshop、GIMP 或在线工具）将图标调整到需要的大小。

  2. SVG 图标：如果图标是 SVG 格式，可以通过调整 SVG 的 viewBox 和 width/height 属性来控制大小，然后在 iconPath 中引用这个 SVG 文件。不过，需要注意的是，不是所有平台都支持 SVG 格式的图标。

  3. CSS 变换：虽然直接在 map 组件内无法通过 CSS 控制 markers 大小，但你可以考虑在地图外实现类似的标记，并通过 CSS 变换来控制大小。这通常涉及到更复杂的布局和交互处理。

通过上述方法，你可以在不手动修改每个图标文件大小的情况下，实现对 markers 大小的控制。

回到顶部