Google Api V3 -隐藏重叠自定义覆盖
Google Api V3 -隐藏重叠自定义覆盖
提问于 2019-02-04 22:29:38
我已经在地图上放置了许多不同城市的自定义覆盖，并试图隐藏/折叠重叠的城市。凡是有空间的地方，我都想展示/扩大人口最多的地方。
我希望实现与谷歌航班(探索部分)完全相同的行为。
我试过什么
我试过以下几种方法。我循环所有的自定义覆盖，检查是否有重叠，然后隐藏如果有一个与较高的人口。问题是太多人被隐藏了，请参见下面的示例：
- A市(人口3000人)
- B市(2000年人口)
- C市(1 000人)
- A和B重叠
- B和C重叠
- A和C不重叠
A和C都应该是可见的，但是C是隐藏的，因为B和C重叠并且B具有较高的种群。
请注意，我使用的是角度，但这是一个一般的js问题。
hideOverlays(){
this.overlays.forEach(mainElement => {
let hide = false;
this.overlays.forEach(compareElement => {
if(this.checkOverlap(mainElement.nativeElement, compareElement.nativeElement)){
if(mainElement.nativeElement.dataset.population < compareElement.nativeElement.dataset.population){
hide = true
}
}
})
if(hide){
mainElement.nativeElement.style.display = "none";
}else{
mainElement.nativeElement.style.display = "flex";
}
});
}
checkOverlap(element1, element2) {
const rect1 = element1.getBoundingClientRect();
const rect2 = element2.getBoundingClientRect();
const overlap = !(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom)
return overlap;
}有人知道如何正确地做这件事吗？如果我要走的方向没有效率，我也愿意采取完全不同的办法。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-02-05 20:35:15
我找到了解决办法。不确定这是否是最好的方法，但它是有效的。
我首先创建了一个带有overlay元素、填充和hidden=false的对象数组。然后我循环并将每个元素与所有其他元素进行比较。如果元素是重叠的，main.hidden == true和main.population >= compare.population，我将比较元素设置为hidden == true。这样，隐藏元素就不会导致其他元素隐藏。
请注意，我的原始数组已经按人口排序，此顺序对于以正确的方式工作非常重要。
最后，我再次循环元素，并根据元素是否隐藏的情况向元素添加类和样式。
filterLocations(){
let overlayArray = [];
this.overlays.forEach(element => {
const overlayObj = {element: element.nativeElement, population: Number(element.nativeElement.dataset.population), hidden: false};
overlayArray.push(overlayObj);
})
overlayArray.forEach( (main, i) => {
overlayArray.forEach( (compare, j) => {
if(i != j && !main.hidden && main.population >= compare.population && this.checkOverlap(compare.element, main.element)){
overlayArray[j].hidden = true;
}
})
})
overlayArray.forEach( (obj, i) => {
if(!obj.hidden){
obj.element.classList.add("expanded");
obj.element.style.pointerEvents = 'auto';
obj.element.style.zIndex = overlayArray.length + overlayArray.length - i;
}else{
obj.element.classList.remove("expanded");
obj.element.style.pointerEvents = 'none';
obj.element.style.zIndex = overlayArray.length - i;
}
})
}
checkOverlap(element1, element2) {
const rect1 = element1.getBoundingClientRect();
const rect2 = element2.getBoundingClientRect();
return !(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54525278
复制相关文章
相似问题
腾讯云开发者
