uniApp+微信小程序 map组件 自定义marker显示层级

最近公司开发小程序，有一个模块需要使用地图显示自定义标点，并根据后台传回的数据区分显示不同的标点，中间因为这个不同marker的图标互相遮挡而思考了一下，最后顺利解决。

HTML代码

<map :layerStyle="layerStyle :longitude="longitude" :latitude="latitude" :scale="scale" :markers="markerData" :subkey="subkey"></map>

JS代码

let subkey = "";// 测试 腾讯地图key
let longitude =  "113.334884";
let latitude =  "23.126003";
let scale =  "6";
let layerStyle = "1";
let markerData = [];//自定义marker数据;

//生成marker数据
const importItem = {
		id: 1, // 
		width: 20,
		height: 20,
		zIndex: 2 ,
		iconPath:'/static/map/marker/red.png',
		latitude:'纬度',
		longitude:'经度',
};
const ordinaryItem = {
		id: 2, // 
		width: 10,
		height: 10,
		zIndex: 1 ,
		iconPath:'/static/map/marker/green.png',
		latitude:'纬度',
		longitude:'经度',
};

//权重更高的marker排后面,权重低的marker排前面,这样页面地图上显示的marker显示层级就会被区分
markerData.push(ordinaryItem,importItem);

默认排序

根据权重排序后

总而言之就是可以在生成所有的marker数据后，对marker进行一次冒泡排序，选中一个值来把权重低的marker排在权重高的marker前面，这样页面上生成的高权重的marker图标就不会被低的遮盖住。