iOS云打包后安装可以复现,真机基座调试时是正常的
- 发布:2024-01-30 16:40
- 更新:2024-01-30 21:14
- 阅读:221
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 10
HBuilderX类型: 正式
HBuilderX版本号: 3.99
手机系统: iOS
手机系统版本号: iOS 16
手机厂商: 苹果
手机机型: iphone xr
页面类型: vue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
操作步骤:
预期结果:
iOS云打包后marker的width,height能生效
iOS云打包后marker的width,height能生效
实际结果:
iOS云打包后安装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>
2***@qq.com (作者)
感谢,问题已解决。但目前还存在一个问题,就是还是上面那套代码,目前H5端marker不显示,我尝试去掉this._mapContext.addMarkers({markers: this.markers}) 代码,然后改成在template的<map>组件加上:markers="markers"属性后,H5可以显示marker了,但还是没法聚合。app端可以正常显示marker并聚合
2024-01-31 09:29