uni-app nvue页面map组件 iOS云打包后 marker的宽高属性无效

uni-app nvue页面map组件 iOS云打包后 marker的宽高属性无效

操作步骤:

  • iOS云打包后安装可以复现,真机基座调试时是正常的

预期结果:

  • iOS云打包后marker的width,height能生效

实际结果:

  • iOS云打包后安装width,height未生效,按图片实际分辨率显示,导致图标非常大

bug描述:

大佬们,求助一下。我有一个nvue页面,使用了map组件,其中marker的图标宽高设置的是4040,图标实际是120120分辨率的,在android上是按4040显示的,显示清晰。在iOS上云打包后安装设置的宽高没起作用,按120120显示的,导致图标显示得很大。如果图标换成4040的,手机上又很模糊,iOS真机基座调试时是正常的,120120分辨率的是按40*40显示清晰,是云打包后安装的有上述问题,请问要如何解决?

<template>  
    <view :style="'height:' + windowHeight + 'px'">  
        <view class="container">  
            <map   
            id="map"  
            class="map"  
            :latitude="latitude"   
            :longitude="longitude"  
            :show-location="false"  
            :scale="scale"  
            @markertap="onMarkerClick"  
            @tap="onMapClick"  
            >  
            </map>  
            <image @click="moveToLocation" class="location" src="../../static/images/icon_location.png"></image>  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            windowHeight: 0,  
            latitude: 30.593354,  
            longitude: 114.304569,  
            scale: 10,  
            markers: [  
                {  
                    id: 1,  
                    latitude: 30.49,  
                    longitude: 114.56,  
                    width: 34,  
                    height: 34,  
                    iconPath: '../../static/images/map_marker_complete.png',  
                    anchor: {x: 0.5, y: 0.5},  
                    joinCluster: true  
                },  
                {  
                    id: 2,  
                    latitude: 30.59,  
                    longitude: 114.30,  
                    width: 34,  
                    height: 34,  
                    iconPath: '../../static/images/map_marker_free.png',  
                    anchor: {x: 0.5, y: 0.5},  
                    joinCluster: true  
                },  
                {  
                    id: 3,  
                    latitude: 30.47,  
                    longitude: 114.39,  
                    width: 34,  
                    height: 34,  
                    iconPath: '../../static/images/map_marker_complete.png',  
                    anchor: {x: 0.5, y: 0.5},  
                    joinCluster: true  
                }]  
        }  
    },  
    onLoad() {  
        var sysInfo = uni.getSystemInfoSync();  
        this.windowHeight = sysInfo.windowHeight  
    },  
    onReady() {  
        this._mapContext = uni.createMapContext("map", this);  
        //初始化聚合  
        this._mapContext.initMarkerCluster({    
            enableDefaultStyle: false, // 是否使用默认聚合样式      
            zoomOnClick: true,    
            gridSize: 60  
        });  
        this._mapContext.on('markerClusterCreate', res => {    
          const markers = res.clusters.map(cluster => {    
            return this.createClusterMarker(cluster)  
          })    
          this._mapContext.addMarkers({markers})  
        })  
        this._mapContext.addMarkers({markers: this.markers})  
    },  
    methods: {  
        createClusterMarker(cluster){  
            const { center, clusterId, markerIds } = cluster  
            return  {    
              ...center,    
              clusterId, // 必须    
              label: {    
                content: markerIds.length + '',    
                fontSize: 16,  
                color: '#ffffff',  
                width: 40,    
                height: 40,    
                bgColor: '#3C7BF8',    
                borderRadius: 20,    
                textAlign: 'center',    
                anchorX: 0.5,  
                anchorY: 0.5,    
              }    
            }  
        },  
        moveToLocation(){  
            var that = this  
            //nvue在android有BUG,不传经纬度会失败,故只能先获取定位信息,  
            uni.getLocation({  
                type: "gcj02",  
                success(res) {  
                    that._mapContext.moveToLocation({  
                        longitude: res.longitude,  
                        latitude: res.latitude,  
                    })  
                }  
            })  
        }  
    }  
}  
</script>  

<style scoped>   

    .container{  
        flex: 1;  
    }  

    .map{  
        width: 750rpx;  
        flex: 1;  
    }  

    .location{  
        position: absolute;  
        right: 0;  
        bottom: 180px;  
        width: 72px;  
        height: 72px;  
    }  

    .flex1{  
        flex: 1;  
    }  

</style>  

图片

Image 1 Image 2 Image 3 Image 4


更多关于uni-app nvue页面map组件 iOS云打包后 marker的宽高属性无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

你好,把图片名字后面加上 @2x 比如 icon_location@2x.png 这样就好了,可以了解一下iOS切图及命名规范

更多关于uni-app nvue页面map组件 iOS云打包后 marker的宽高属性无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


感谢,问题已解决。但目前还存在一个问题,就是还是上面那套代码,目前H5端marker不显示,我尝试去掉this._mapContext.addMarkers({markers: this.markers}) 代码,然后改成在template的<map>组件加上:markers="markers"属性后,H5可以显示marker了,但还是没法聚合。app端可以正常显示marker并聚合

在使用 uni-app 开发 nvue 页面时,如果你在 iOS 云打包后发现 map 组件的 marker 的宽高属性无效,可能是由于以下原因导致的:

1. iOS 平台的限制

  • 在 iOS 平台上,map 组件的 marker 宽高属性可能受到平台本身的限制。iOS 的地图组件可能与 Android 的实现不同,导致某些属性不生效。

2. nvue 页面的特殊性

  • nvue 页面是基于原生渲染的,与 vue 页面的渲染机制不同。在 nvue 页面中使用 map 组件时,某些属性可能无法像在 vue 页面中那样正常工作。

3. 云打包的配置问题

  • 云打包时,某些配置可能会导致 marker 的宽高属性失效。你可以检查云打包的配置,确保没有遗漏或错误的设置。

解决方案

1. 使用 iconPath 替代宽高属性

  • 如果 marker 的宽高属性无效,可以尝试使用 iconPath 来设置 marker 的图标,并且通过调整图标本身的尺寸来间接控制 marker 的宽高。
<map :markers="markers" style="width: 100%; height: 300px;"></map>
export default {
    data() {
        return {
            markers: [{
                id: 1,
                latitude: 39.909,
                longitude: 116.39742,
                iconPath: '/static/marker.png', // 使用自定义图标
                width: 30, // 可能无效
                height: 30 // 可能无效
            }]
        }
    }
}
  • 在这里,marker 的宽高属性可能无效,但你可以通过调整 iconPath 指向的图片的尺寸来控制 marker 的大小。

2. 使用 label 替代 marker

  • 如果 marker 的宽高属性无效,可以考虑使用 label 来替代 marker,并通过 label 的样式来控制显示效果。
<map :labels="labels" style="width: 100%; height: 300px;"></map>
export default {
    data() {
        return {
            labels: [{
                id: 1,
                content: '标记',
                latitude: 39.909,
                longitude: 116.39742,
                color: '#FF0000',
                fontSize: 14,
                bgColor: '#FFFFFF',
                borderRadius: 10,
                padding: 5
            }]
        }
    }
}
回到顶部