2***@qq.com
2***@qq.com
  • 发布:2024-01-30 16:40
  • 更新:2024-01-30 21:14
  • 阅读:221

【报Bug】nvue页面map组件,iOS云打包后marker的宽高属性无效

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.99

手机系统: iOS

手机系统版本号: iOS 16

手机厂商: 苹果

手机机型: iphone xr

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

操作步骤:

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>  
2024-01-30 16:40 负责人:DCloud_iOS_XHY 分享
已邀请:
DCloud_iOS_XHY

DCloud_iOS_XHY

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

  • 2***@qq.com (作者)

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

    2024-01-31 09:29

要回复问题请先登录注册