enableDefaultStyle: false,
zoomOnClick: true,
gridSize: 50,
complete: (res) => {
console.log('initMarkerCluster', res)
this.longitude = this.getMyPosition.lng
this.latitude = this.getMyPosition.lat
this.setMapCenter(this.longitude, this.latitude)
this.getStationAll(this.latitude, this.longitude, true);
}
});
this.mapContext.on("markerClusterCreate", (e) => {
console.log("markerClusterCreate", e, scale);
if (scale <= 14 && scale > 12) {
this.setMapCluste(e)
}
});
setMapCluste(e) {
let system = uni.getSystemInfoSync();
let isIos = system.osName == 'ios';
let clusterMarkers = [],
ids = [];
const clusters = e.clusters; // 新产生的聚合簇
clusters.forEach((cluster, index) => {
console.log('setMapCluste', cluster)
const {
center, // 聚合点的经纬度数组
clusterId, // 聚合簇id
markerIds // 已经聚合了的标记点id数组
} = cluster;
let clusterObj = {
clusterId, //必须
...center,
id: clusterId,
joinCluster: false, // 注意:不加此项 自定义样式不显示,
// iconPath: require('../../static/mapBg_old.png'),
width: 20,
height: 20,
anchor: {
x: 0,
y: 0.8
},
label: {
content: markerIds.length + '',
borderRadius: 50,
fontSize: 12,
color: '#61ba2d',
bgColor: '#ffffff',
borderColor: '#61ba2d',
borderWidth: 3,
width: 30,
height: 30,
lineHeight: 30,
textAlign: 'center',
anchorX: isIos ? 0 : -5,
anchorY: -32
}
};
clusterMarkers.push(clusterObj);
});
// 添加聚合簇
//console.log('clusterMarkers', clusterMarkers)
this.clusterMarkersArr = ids;
this.mapContext.addMarkers({
markers: clusterMarkers,
clear: false //是否先清空地图上所有的marker
});
},
- 发布:2024-08-05 12:04
- 更新:2024-08-05 12:04
- 阅读:131
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win11
HBuilderX类型: 正式
HBuilderX版本号: 4.24
手机系统: Android
手机系统版本号: Android 14
手机厂商: 荣耀
手机机型: 荣耀60pro
页面类型: vue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
enableDefaultStyle: false,
zoomOnClick: true,
gridSize: 50,
complete: (res) => {
console.log('initMarkerCluster', res)
this.longitude = this.getMyPosition.lng
this.latitude = this.getMyPosition.lat
this.setMapCenter(this.longitude, this.latitude)
this.getStationAll(this.latitude, this.longitude, true);
}
});
this.mapContext.on("markerClusterCreate", (e) => {
console.log("markerClusterCreate", e, scale);
if (scale <= 14 && scale > 12) {
this.setMapCluste(e)
}
});
setMapCluste(e) {
let system = uni.getSystemInfoSync();
let isIos = system.osName == 'ios';
let clusterMarkers = [],
ids = [];
const clusters = e.clusters; // 新产生的聚合簇
clusters.forEach((cluster, index) => {
console.log('setMapCluste', cluster)
const {
center, // 聚合点的经纬度数组
clusterId, // 聚合簇id
markerIds // 已经聚合了的标记点id数组
} = cluster;
let clusterObj = {
clusterId, //必须
...center,
id: clusterId,
joinCluster: false, // 注意:不加此项 自定义样式不显示,
// iconPath: require('../../static/mapBg_old.png'),
width: 20,
height: 20,
anchor: {
x: 0,
y: 0.8
},
label: {
content: markerIds.length + '',
borderRadius: 50,
fontSize: 12,
color: '#61ba2d',
bgColor: '#ffffff',
borderColor: '#61ba2d',
borderWidth: 3,
width: 30,
height: 30,
lineHeight: 30,
textAlign: 'center',
anchorX: isIos ? 0 : -5,
anchorY: -32
}
};
clusterMarkers.push(clusterObj);
});
// 添加聚合簇
//console.log('clusterMarkers', clusterMarkers)
this.clusterMarkersArr = ids;
this.mapContext.addMarkers({
markers: clusterMarkers,
clear: false //是否先清空地图上所有的marker
});
},
enableDefaultStyle: false,
zoomOnClick: true,
gridSize: 50,
complete: (res) => {
console.log('initMarkerCluster', res)
this.longitude = this.getMyPosition.lng
this.latitude = this.getMyPosition.lat
this.setMapCenter(this.longitude, this.latitude)
this.getStationAll(this.latitude, this.longitude, true);
}
});
this.mapContext.on("markerClusterCreate", (e) => {
console.log("markerClusterCreate", e, scale);
if (scale <= 14 && scale > 12) {
this.setMapCluste(e)
}
});
setMapCluste(e) {
let system = uni.getSystemInfoSync();
let isIos = system.osName == 'ios';
let clusterMarkers = [],
ids = [];
const clusters = e.clusters; // 新产生的聚合簇
clusters.forEach((cluster, index) => {
console.log('setMapCluste', cluster)
const {
center, // 聚合点的经纬度数组
clusterId, // 聚合簇id
markerIds // 已经聚合了的标记点id数组
} = cluster;
let clusterObj = {
clusterId, //必须
...center,
id: clusterId,
joinCluster: false, // 注意:不加此项 自定义样式不显示,
// iconPath: require('../../static/mapBg_old.png'),
width: 20,
height: 20,
anchor: {
x: 0,
y: 0.8
},
label: {
content: markerIds.length + '',
borderRadius: 50,
fontSize: 12,
color: '#61ba2d',
bgColor: '#ffffff',
borderColor: '#61ba2d',
borderWidth: 3,
width: 30,
height: 30,
lineHeight: 30,
textAlign: 'center',
anchorX: isIos ? 0 : -5,
anchorY: -32
}
};
clusterMarkers.push(clusterObj);
});
// 添加聚合簇
//console.log('clusterMarkers', clusterMarkers)
this.clusterMarkersArr = ids;
this.mapContext.addMarkers({
markers: clusterMarkers,
clear: false //是否先清空地图上所有的marker
});
},
预期结果:
不展示默认聚合样式
不展示默认聚合样式
实际结果:
先展示默认聚合样式后更新为自定义聚合样式,部分聚合点 自定义样式无法显示。
先展示默认聚合样式后更新为自定义聚合样式,部分聚合点 自定义样式无法显示。
bug描述:
android nvue页面 动态渲染marker 点聚合会先显示蓝色默认样式 后更新为自定义样式