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>
图片

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

