uni-app 打包ios自定义基座时 map组件设置markers的width和height失效

开发环境	版本号	项目创建方式
Windows	10 家庭中文版/22H2/19045.4291	HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.08

手机系统：iOS

手机系统版本号：iOS 17

手机厂商：苹果

手机机型：Iphone 11

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

```html
<template>  
    <view class="dis-flex vertical flex-full" style="height: 100vh;" >  
        <div class="dis-flex flex">  
            <map style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude" :markers="covers">  
            </map>  
        </div>  
        <div class="position dis-flex vertical flex-full">  
            <div class="title dis-flex flex-middle flex-full">  
                <div class="title-icon"></div>  
                车辆位置  
            </div>  
            <div class="des">STAR EV</div>  
        </div>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                id: 0, // 使用 marker点击事件 需要填写id  
                title: 'map',  
                latitude: 39.909,  
                longitude: 116.39742,  
                covers: [{  
                    latitude: 39.909,  
                    longitude: 116.39742,  
                    iconPath: '../../static/6b31ab4e43873ee3331da865ef15078.png',  
                    width: 40,  
                    height: 53,  
                }, {  
                    latitude: 39.90,  
                    longitude: 116.39,  
                    iconPath: '../../static/6b31ab4e43873ee3331da865ef15078.png',  
                    width: 40,  
                    height: 53,  
                }]  
            }  
        },  
    }  
</script>

操作步骤：

对接百度地图
使用map组件用了markers，设置了maskers大小，在H5中生效，但是配置好app相关地图配置后，打包IOS自定义基座后，发现maskers设置的width和height属性失效，无法设置maskers大小

预期结果：

markers可以设置width和height

实际结果：

markers设置width和height在ios自定义基座失效

bug描述：

对接百度地图
使用map组件用了markers，设置了maskers大小，在H5中生效，但是配置好app相关地图配置后，打包IOS自定义基座后，发现maskers设置的width和height属性失效，无法设置maskers大小

caililin 1楼•2 个月前

这个属性app要在nvue 页面使用

vueper 2楼•2 个月前

在 uni-app 中，使用 map 组件时，markers 的 width 和 height 属性在某些情况下可能会失效，尤其是在自定义基座上打包 iOS 应用时。这可能是由于以下原因：

1. 平台差异

iOS 和 Android 平台对 map 组件的实现可能有所不同，导致某些属性在 iOS 上表现不一致。

2. 自定义基座问题

自定义基座可能存在某些配置问题，导致 map 组件的某些属性无法正常生效。

3. uni-app 版本问题

如果你使用的 uni-app 版本较旧，可能存在一些已知的 bug 或兼容性问题。建议更新到最新版本。

解决方案

1. 检查 uni-app 版本

确保你使用的是最新版本的 uni-app。你可以通过以下命令更新 uni-app：

npm update -g [@vue](/user/vue)/cli [@dcloudio](/user/dcloudio)/uni-cli

2. 使用 `iconPath` 替代 `width` 和 `height`

如果你需要自定义 marker 的大小，可以尝试使用 iconPath 属性，将 marker 设置为自定义图片，并通过图片的尺寸来控制 marker 的大小。

<map :markers="markers"></map>

export default {
  data() {
    return {
      markers: [{
        id: 1,
        latitude: 39.909,
        longitude: 116.39742,
        iconPath: '/static/marker.png', // 自定义 marker 图片
        width: 30, // 设置宽度
        height: 30 // 设置高度
      }]
    }
  }
}

3. 使用 `cover-view` 自定义 `marker`

如果 marker 的 width 和 height 仍然无法生效，你可以考虑使用 cover-view 组件来自定义 marker 的内容和样式。

<map>
  <cover-view class="custom-marker" :style="{left: markerLeft, top: markerTop}">
    <cover-image src="/static/marker.png"></cover-image>
  </cover-view>
</map>

export default {
  data() {
    return {
      markerLeft: '50px',
      markerTop: '50px'
    }
  }
}

.custom-marker {
  position: absolute;
  width: 30px;
  height: 30px;
}