![]()
+
@@ -529,60 +530,86 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
const locImgs = IMAGE_LOCATIONS[bldg.trim()]?.[detail.trim()] || null;
const imgPath = (savedImg && locImgs?.includes(savedImg)) ? savedImg : (locImgs ? locImgs[0] : null);
+ const htmlMap = document.getElementById('detail-html-map') as HTMLIFrameElement;
+ const isHtmlMap = imgPath?.toLowerCase().endsWith('.html');
+
// 좌표가 없으면 사진이 있어도 '정보 없음' 상태로 유도 (사용자 요청)
if (imgPath && hasCoords) {
- photo.src = imgPath;
- photo.style.display = 'block';
+ if (isHtmlMap) {
+ // HTML 지도 처리
+ photo.style.display = 'none';
+ if (marker) marker.style.display = 'none';
+ if (overlayLayer) overlayLayer.innerHTML = '';
+ if (htmlMap) {
+ htmlMap.src = `${imgPath}?markerX=${x}&markerY=${y}`;
+ htmlMap.style.display = 'block';
+ }
+ } else {
+ // 일반 이미지 지도 처리
+ if (htmlMap) {
+ htmlMap.src = '';
+ htmlMap.style.display = 'none';
+ }
+ photo.src = imgPath;
+ photo.style.display = 'block';
+ }
+
if (noPhoto) noPhoto.style.display = 'none';
- photo.onload = () => {
- const updateMarkerPos = () => {
- const imgW = photo.clientWidth;
- const imgH = photo.clientHeight;
+ if (!isHtmlMap) {
+ photo.onload = () => {
+ const updateMarkerPos = () => {
+ const imgW = photo.clientWidth;
+ const imgH = photo.clientHeight;
- if (marker) {
- marker.style.left = `calc(50% - ${imgW/2}px + ${ (parseFloat(x as string) * imgW) / 100 }px)`;
- marker.style.top = `calc(50% - ${imgH/2}px + ${ (parseFloat(y as string) * imgH) / 100 }px)`;
- marker.style.display = 'block';
- }
-
- if (overlayLayer) {
- overlayLayer.style.width = `${imgW}px`;
- overlayLayer.style.height = `${imgH}px`;
- overlayLayer.style.left = `calc(50% - ${imgW/2}px)`;
- overlayLayer.style.top = `calc(50% - ${imgH/2}px)`;
-
- const boxes = dynamicMapConfig[imgPath] || [];
- if (boxes.length > 0) {
- overlayLayer.innerHTML = `
-
- `;
- } else {
- overlayLayer.innerHTML = '';
+ if (marker) {
+ marker.style.left = `calc(50% - ${imgW/2}px + ${ (parseFloat(x as string) * imgW) / 100 }px)`;
+ marker.style.top = `calc(50% - ${imgH/2}px + ${ (parseFloat(y as string) * imgH) / 100 }px)`;
+ marker.style.display = 'block';
}
- }
+
+ if (overlayLayer) {
+ overlayLayer.style.width = `${imgW}px`;
+ overlayLayer.style.height = `${imgH}px`;
+ overlayLayer.style.left = `calc(50% - ${imgW/2}px)`;
+ overlayLayer.style.top = `calc(50% - ${imgH/2}px)`;
+
+ const boxes = dynamicMapConfig[imgPath] || [];
+ if (boxes.length > 0) {
+ overlayLayer.innerHTML = `
+
+ `;
+ } else {
+ overlayLayer.innerHTML = '';
+ }
+ }
+ };
+ updateMarkerPos();
+ window.addEventListener('resize', updateMarkerPos);
};
- updateMarkerPos();
- window.addEventListener('resize', updateMarkerPos);
- };
+ }
} else {
photo.style.display = 'none';
+ if (htmlMap) {
+ htmlMap.src = '';
+ htmlMap.style.display = 'none';
+ }
if (marker) marker.style.display = 'none';
if (overlayLayer) overlayLayer.innerHTML = '';
if (noPhoto) {
-