最近的项目需求是要将定位周边的拍卖数据,拍卖数据会有“一拍”、“二拍”等,但都是同一条数据,也就是坐标会相同,此时在地图上添加坐标点时,会出现覆盖的情况,也就是一个坐标点下面其实是有两条数据的。
此时就需要在坐标点上标上对应的数字表现出来(如图),但后台返回的数据都是单独的,并没有将坐标相同的整合返回到前端。
按照以前的思路,可能会将数据循环之后,将坐标单独提炼出来进行循环判断,然后写三五个 for 循环和 if 语句。
在ES6中可以使用Map进行数据的合并,也是将坐标单独提炼出来,不过是将坐标用作KEY,其他数据用作VALUE。
let opt = [
{id: 1, geoPoint: {lon: 121.12, lat: 31.31}},
{id: 2, geoPoint: {lon: 121.13, lat: 31.32}},
{id: 3, geoPoint: {lon: 121.14, lat: 31.33}},
{id: 4, geoPoint: {lon: 121.13, lat: 31.32}}
]
let map = new Map();
for (let item of opt) {
let { geoPoint } = item;
let _item = [];
if (map.has(geoPoint)) {
_item = map.get(geoPoint);
map.set(geoPoint, [..._item, item]);
} else {
map.set(geoPoint, [item]);
}
}
但是这样返回的数据如下:并没有将坐标一致的放在一起
这个时候就涉及到Map的一个知识点,使用对象作为KEY,表面是针对同一个键,但实际上这是两个值,内存地址是不一样的。
更改代码如下:将存储的对象转换成字符串
let opt = [
{id: 1, geoPoint: {lon: 121.12, lat: 31.31}},
{id: 2, geoPoint: {lon: 121.13, lat: 31.32}},
{id: 3, geoPoint: {lon: 121.14, lat: 31.33}},
{id: 4, geoPoint: {lon: 121.13, lat: 31.32}}
]
let map = new Map();
for (let item of opt) {
let { geoPoint } = item;
let _item = [];
if (map.has(JSON.stringify(geoPoint))) {
_item = map.get(JSON.stringify(geoPoint));
map.set(JSON.stringify(geoPoint), [..._item, item]);
} else {
map.set(JSON.stringify(geoPoint), [item]);
}
}