前言:uni-app开发地图多端兼容简直是地狱模式,以下是我们团队共花费了【15个工作日工时】经历各种测试,最后总结出来的几个关键点.当前已经现实了一套代码,在多个平台实现点聚合功能.
官方文档: uniapp.dcloud.net.cn/component/m…
注意1:编写代码文件类型.
1.app端,只能使用.nvue文件才可有效.
1-1..nvue文件,不支持Typescript代码,只能写Javascript代码.
1-2..nvue文件的父子组件,最好也使用.nvue文件,使用.vue文件,还是很容易出问题.
2.小程序端可以使用.vue文件,但必须处于真机上才有效果.
2-1.小程序使用.nvue文件,模拟器上能看到聚合图标,但无法显示iconPath字段图标,真机上能正常显示.
注意2:官方文档的坑.
关键字段:joinCluster
问题: 按照文档说明,marker应该是这样.但是经过测试.不管怎么测,都无法出现聚合效果.
// 错误示范
let marker = {
id: id,
latitude: lat,
longitude: long,
title: '这是一个title',
iconPath: '/static/logo.png',
width: 100,
height: 100,
label: {
joinCluster: true, // 指定了该参数才会参与聚合
anchorX: 0,
anchorY: -100,
content: '点位05',
},
}
解决方式:joinCluster的位置,放到marker的属性字段中,而非label中.
// 正确示范
let marker = {
joinCluster: true, // 指定了该参数才会参与聚合
id: id,
latitude: lat,
longitude: long,
title: '这是一个title',
iconPath: '/static/logo.png',
width: 100,
height: 100,
label: {
anchorX: 0,
anchorY: -100,
content: '点位05',
},
}
注意3:使用的细节需要注意
关键方法:addMarkers.【支持安卓APP/苹果APP/小程序-安卓端,不支持小程序-苹果端,后面单独处理】
通过获得地图实例对象,然后调用api进行markers的添加.添加的内容是一个配置对象,【markers】只是该对象中一个属性.
this.mapCtx = uni.createMapContext('map', this);
this.mapCtx.initMarkerCluster();
this.mapCtx.addMarkers({
markers,
clear: true,
complete(res) {
console.log('addMarkers', res);
}
});
这两个写了【可选】的函数,并不是必须调用.你不调用也有默认值.
但是安卓有bug,如果不调用一次initMarkerCluster,则第一次addMarkers将无效.因此创建地图和初始化聚合这两句代码,请直接打包调用.
this.mapCtx = uni.createMapContext('map', this);
this.mapCtx.initMarkerCluster();
【小程序--苹果端】:需要单独处理.只能使用传入marker数组的方式,实现点聚合的回显.
重点总结:
小程序--安卓端直接传入marker数组无法使用点聚合的效果.
小程序--苹果端通过调用addMarkers无法使用点聚合的效果.
因此,此处必须写兼容代码分别处理,绝对没有办法实现一套逻辑代码,两端通用.
4.多端兼容其他的一些细节.
1.使用聚合时marker配置joinCluster: true,同时使用mapCtx.addMarkers将marker置入地图中.详情查看【原因1-1,1-2】.
2.刷新聚合图标的位置使用mapCtx.addMarkers,并且配置项clear设置成false.详情查看【原因2】.
PS:小程序苹果端刷新,直接编辑markers的数组列表.
mapCtx.addMarkers({
markers: markers,
clear: false
});
3.清除markers,参数是markerIds不是markers;
mapCtx.removeMarkers({
markerIds: markers.map(item => item.id)
});
4.marker的图标路径iconPath中不要有中文.详情查看【原因3】.
5.marker自定义图标定位的尖角,必须位于图片的下方正中心【不能有多于的透明像素间隔】,如下图所示:原因查看【原因4】
原因:--------------------原因-------------------------
1-1:使用聚合marker需要配置joinCluster: true;
1-2:【1-1前是下】App端的<map :markers="markers">传入markers直接就会使用聚合效果,或者使用mapCtx.addMarkers将点加入聚合;微信小程序端则只能使用mapCtx.addMarkers才能将数据加入聚合.
2.APP端markers列表中每一项经纬度变更后,直接mapCtx.addMarkers配置项clear:false能够实现图标的刷新,如果设置成true,每次刷新,图标都集体闪烁一下,用户体验很差.
3.安卓和微信小程序可以使用中文,但苹果端使用中文要出异常,所以统一不要使用中文.
4.在任意端.marker本来有anchor属性,用于调整图片的位置,经过尝试后发现.所有端都无效,所以只能预先将图片处理好.
完.
