uni-app Map组件使用点聚合功能时，在ios平台marker的label内容不显示
uni-app Map组件使用点聚合功能时，在ios平台marker的label内容不显示
产品分类：
uniapp/小程序/微信
PC开发环境操作系统：
Windows
PC开发环境操作系统版本号：
21H2
HBuilderX类型：
正式
HBuilderX版本号：
3.6.18
第三方开发者工具版本号：
1.06.2301160
基础库版本号：
3.2.0
项目创建方式：
HBuilderX
操作步骤：
async getCompanyMapPoint(markersAll = []) {
this.companyMapPointQuery.deptId = this.currentDeptId
this.companyMapPointQuery.speciesId = this.speciesId
const res = await companyMapPoint(this.companyMapPointQuery);
let iconPath = '/static/images/marker.png'
if(this.companyMapPointQuery.queryType !== "YZZT"){
iconPath = '/static/images/resource/fish.png'
}
let markers = res.data.map(item => {
const [lng, lat] = item.location.split(',');
return {
id: item.id,
latitude: lat,
longitude: lng,
width: 30,
height: 30,
joinCluster: true, // 指定了该参数才会参与聚合
iconPath
};
});
markersAll = markersAll.concat(markers)
if (res.data.length == this.companyMapPointQuery.pageSize) {
this.companyMapPointQuery.pageNum += 1
this.getCompanyMapPoint(markers)
} else {
switch (uni.getSystemInfoSync().platform) {
case 'android':
this.mapCtx.addMarkers({
markers: markersAll,
clear: true
})
break;
case 'ios':
this.markers = []
this.markers = markersAll
break;
default:
this.mapCtx.addMarkers({
markers: markersAll,
clear: true
})
break;
}
}
// this.mapCtx.includePoints({
// points: this.markerIds,
// padding: [20, 20, 20, 20]
// });
},
// 聚合簇点击
markerClusterClick(res) {},
// 聚合簇形成
markerClusterCreate(res) {
const clusters = res.clusters // 新产生的聚合簇
let iconPath = '/static/images/marker.png'
if(this.companyMapPointQuery.queryType !== "YZZT"){
iconPath = '/static/images/resource/fishs.png'
}
const markers = clusters.map(cluster => {
let {
center, // 聚合点的经纬度数组
clusterId, // 聚合簇id
markerIds // 已经聚合了的标记点id数组
} = cluster
console.log("markerIds", markerIds.length);
return {
...center,
width: 50,
height: 50,
clusterId, // 必须
iconPath,
borderRadius: 8,
joinCluster: true,
// callout: {
// bgColor: "#5AC2EB",
// color: "#fff",
// content: markerIds.length,
// display: "ALWAYS",
// fontSize: "14",
// fontWeight: "bold",
// padding: 8,
// textAlign: "center"
// },
label: { // 定制聚合点样式
content: markerIds.length,
fontSize: 14,
width: 18,
height: 18,
color: '#ffffff',
bgColor: '#C2874D',
borderRadius: 6,
textAlign: 'center',
anchorX: 25,
anchorY: -60,
}
}
})
switch (uni.getSystemInfoSync().platform) {
case 'android':
// 添加聚合簇
this.mapCtx.addMarkers({
markers,
clear: false, //是否先清空地图上所有的marker
})
break;
case 'ios':
this.markers = this.markers.concat(markers)
break;
default:
// 添加聚合簇
this.mapCtx.addMarkers({
markers,
clear: false, //是否先清空地图上所有的marker
})
break;
}
},
```
### 预期结果：
```
marker自定义的label中应该会出现点聚合数量
```
### 实际结果：
```
ios中未出现
```
### bug描述：
```
微信开发者工具中运行截图，点聚合后右上角的label填充了内容显示
ios真机运行截图，只有label正常显示，但是填充内容消失
```
### 截图：
更多关于uni-app Map组件使用点聚合功能时，在ios平台marker的label内容不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html
1 回复
更多关于uni-app Map组件使用点聚合功能时，在ios平台marker的label内容不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html
在使用 uni-app 的 Map 组件时，如果在 iOS 平台上遇到 marker 的 label 内容不显示的问题，可能是由于以下几个原因导致的：
1. iOS 平台的兼容性问题
- iOS 平台对
Map组件的label支持可能存在一些限制或兼容性问题。特别是在使用点聚合功能时，可能会出现label不显示的情况。
2. label 属性设置问题
- 确保
marker的label属性设置正确。label需要包含content属性，并且内容不能为空。
{
"id": 1,
"latitude": 39.909,
"longitude": 116.39742,
"label": {
"content": "这里是标签内容",
"color": "#000000",
"fontSize": 14
}
}
3. label 的样式问题
label的样式设置可能会影响其显示效果。确保color和fontSize等属性设置合理，避免颜色与背景色相同导致无法显示。
4. 点聚合功能的影响
- 点聚合功能可能会影响
marker的显示，尤其是在聚合后的marker上，label可能不会显示。可以尝试在不使用点聚合功能的情况下，检查label是否正常显示。
5. 使用自定义 Marker
- 如果
label无法正常显示，可以考虑使用自定义Marker来实现类似的效果。通过cover-view或cover-image组件，自定义marker的显示内容。
<map id="map" :latitude="latitude" :longitude="longitude">
<cover-view class="custom-marker" :style="{left: marker.left, top: marker.top}">
{{ marker.label }}
</cover-view>
</map>
6. 检查 uni-app 版本
- 确保使用的
uni-app版本是最新的，因为旧版本可能存在一些已知的 bug 或兼容性问题。
7. 调试与日志
- 在 iOS 平台上，使用
console.log或uni.showModal输出调试信息，检查marker和label的设置是否正确。
8. 使用原生地图插件
- 如果问题依然无法解决，可以考虑使用原生地图插件（如高德地图或百度地图的 SDK），这些插件通常对
label的支持更好。
示例代码
以下是一个简单的示例代码，展示如何在 uni-app 中使用 Map 组件的 marker 和 label：
<template>
<view>
<map id="map" :latitude="latitude" :longitude="longitude" :markers="markers"></map>
</view>
</template>
<script>
export default {
data() {
return {
latitude: 39.909,
longitude: 116.39742,
markers: [
{
id: 1,
latitude: 39.909,
longitude: 116.39742,
label: {
content: "这里是标签内容",
color: "#000000",
fontSize: 14
}
}
]
};
}
};
</script>
<style>
/* 样式 */
</style>