diff --git a/src/components/MapboxMaps/MapComponent.vue b/src/components/MapboxMaps/MapComponent.vue index 81663d8..945be5f 100644 --- a/src/components/MapboxMaps/MapComponent.vue +++ b/src/components/MapboxMaps/MapComponent.vue @@ -2150,49 +2150,59 @@ childElement.style.backgroundSize = '43px 57px'; childElement.style.position = "relative"; arrowElement.appendChild(childElement); - pictureArrowElementArray.value?.push(childElement); - pictureParentArrowElementArray.value?.push(arrowElement); - let arrowMark = new mapboxgl.Marker(arrowElement) - .setLngLat([item.lng, item.lat]) - .addTo(map); + + let childElementObj = { + id:item.id, + element:childElement + } + pictureArrowElementArray.value?.push(childElementObj); + + let arrowElementObj = { + id:item.id, + element:arrowElement + } + pictureParentArrowElementArray.value?.push(arrowElementObj); + + let arrowMark = new mapboxgl.Marker(arrowElement).setLngLat([item.lng, item.lat]).addTo(map); pictureArrowMarker.value?.push(arrowMark); } }); currentPictureZIndex.value = list?.length; - // setTimeout(function(){ // handlerCurrentImageChange(0); // },10000) } - function handlerCurrentImageChange(fileName) { +function handlerCurrentImageChange(fileName) { // 根据图片名检索标签 let currentIndex = null; + let currentId = null; imageList.value?.forEach((item, index) => { if (item.filePath?.match(fileName)) { currentIndex = index; + currentId = item.id; currentPictureIndex.value = index; } }); try { pictureArrowElementArray.value?.forEach((itme, index) => { - pictureArrowElementArray.value[index].style.backgroundImage = 'url(/map/arrow.png)'; + pictureArrowElementArray.value[index]['element'].style.backgroundImage = 'url(/map/arrow.png)'; if(isShowPicture.value){ - pictureArrowElementArray.value[index].style.display = 'block'; + pictureArrowElementArray.value[index]['element'].style.display = 'block'; }else{ - pictureArrowElementArray.value[index].style.display = 'none'; + pictureArrowElementArray.value[index]['element'].style.display = 'none'; + } + if(itme.id == currentId){ + pictureArrowElementArray.value[index]['element'].style.backgroundImage = 'url(/map/arrow-a.png)'; + pictureArrowElementArray.value[index]['element'].style.display = 'block'; + + // 设置显示在最上层 + currentPictureZIndex.value = currentPictureZIndex.value + 1; + pictureParentArrowElementArray.value[index]['element'].style.zIndex = currentPictureZIndex.value; } }); - - pictureArrowElementArray.value[currentIndex].style.backgroundImage = 'url(/map/arrow-a.png)'; - pictureArrowElementArray.value[currentIndex].style.display = 'block'; - - // 设置显示在最上层 - currentPictureZIndex.value = currentPictureZIndex.value + 1; - pictureParentArrowElementArray.value[currentIndex].style.zIndex = currentPictureZIndex.value; } catch (e) {} - return; }