uni-app app端map地图设置图标的大小width和height无效

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

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：10

HBuilderX类型：正式

HBuilderX版本号：3.96

手机系统：Android

手机系统版本号：Android 13

手机厂商：华为

手机机型：nova7pro

页面类型：vue

vue版本：vue2

打包方式：云端

示例代码：

<template>  
    <view class="map">  
        <view class="page-body">  
            <view class="page-section page-section-gap">  
                <map style="width: 100%; height: 100vh;" :latitude="latitude" :longitude="longitude" :markers="covers">  
                <cover-view class="cover-view">  
                        <cover-image @tap="getLocationHandle" class="cover-image" src="@/static/refresh.png"></cover-image>  
                </cover-view>     
                </map>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                id: 0, // 使用 marker点击事件 需要填写id  
                title: 'map',  
                latitude: 39.909,  
                longitude: 116.39742,  
                covers: [],  
                address:''  
            }  
        },  
        onShow(){  
            this.getLocation()  
        },  
        onNavigationBarButtonTap(){  
            console.log('经度：' + this.longitude + '，纬度：' + this.latitude,this.address);  
        },  
        methods: {  
            // 定位授权  
            getLocation() {  
                let that = this;  
                // 1、判断手机定位服务【GPS】 是否授权  
                uni.getSystemInfo({  
                    success:(res) => {  
                        console.log("判断手机定位服务是否授权:", res);  
                        let locationEnabled = res.locationEnabled; //判断手机定位服务是否开启  
                        if (locationEnabled == false) {  
                            //手机定位服务（GPS）未授权  
                            uni.showToast({  
                                title: "请打开手机GPS",  
                                icon: "none",  
                            });  
                        } else {  
                            this.getLocationHandle(1)  
                        }  
                    }),  
                });  
            },  
            getLocationHandle(type){  
                this.latitude = type===1?39.909:''  
                this.longitude = type===1?116.39742:''  
                uni.getLocation({  
                    geocode:true,  
                    type: 'gcj02', // 坐标系类型  
                    success:  (res)=> {  
                        console.log(res);  
                        this.address = res.address  
                        this.latitude = res.latitude; // 维度  
                        this.longitude = res.longitude; // 经度  
                        this.covers = [{  
                            id:1,  
                            latitude: this.latitude,  
                            longitude: this.longitude,  
                            width:40,  
                            height:40,  
                            iconPath: '/static/componentA/city1.png'  
                        }]  
                    },  
                    fail:  (res) =>{  
                        console.log('获取定位失败：' + res.errMsg);  
                    }  
                })  
            }  
        }  
    }  
</script>

操作步骤：

直接运行

预期结果：

大小和设置的一致

实际结果：

图标大小很小

yibo5220 1楼•6 天前

nvue支持，vue不支持

sinazl 2楼•6 天前

在 uni-app 中使用 map 组件时，设置图标的 width 和 height 属性可能不会生效。这是因为 map 组件的地图标记（marker）的图标大小通常由图标的图片本身决定，而不是通过 width 和 height 属性来控制。

如果你想要调整地图标记的图标大小，可以尝试以下方法：

1. 使用自定义图标

你可以使用自定义图标，并在图标生成时调整其大小。例如，使用 uni.getImageInfo 获取图片信息后，调整图片的大小。

uni.getImageInfo({
  src: 'path/to/your/icon.png',
  success: (res) => {
    const iconPath = res.path;
    const iconWidth = 50; // 自定义宽度
    const iconHeight = 50; // 自定义高度

    this.markers = [{
      id: 1,
      latitude: 39.909,
      longitude: 116.39742,
      iconPath: iconPath,
      width: iconWidth,
      height: iconHeight
    }];
  }
});

2. 使用 `scale` 属性

在 marker 中，你可以使用 scale 属性来缩放图标的大小。scale 是一个缩放比例，1 表示原始大小，小于 1 表示缩小，大于 1 表示放大。

this.markers = [{
  id: 1,
  latitude: 39.909,
  longitude: 116.39742,
  iconPath: 'path/to/your/icon.png',
  width: 50, // 原始宽度
  height: 50, // 原始高度
  scale: 0.5 // 缩放比例
}];

3. 使用 `label` 替代 `icon`

如果你不需要复杂的图标，可以使用 label 来显示文本标记，并通过 fontSize 和 bgColor 等属性来控制其外观。

this.markers = [{
  id: 1,
  latitude: 39.909,
  longitude: 116.39742,
  label: {
    content: '标记',
    fontSize: 14,
    bgColor: '#FFFFFF',
    borderRadius: 10,
    padding: 5
  }
}];

4. 使用 `cover-view` 和 `cover-image`

如果你需要更复杂的自定义标记，可以使用 cover-view 和 cover-image 组件来覆盖在地图上，并自由控制其大小和样式。

<map id="map" style="width: 100%; height: 300px;">
  <cover-view>
    <cover-image src="path/to/your/icon.png" style="width: 50px; height: 50px;"></cover-image>
  </cover-view>
</map>