1import { R as REGION } from "./enum.84551e71.js"; 2import { d as defineComponent, r as ref, b as onUpdated, e as onMounted, o as openBlock, c as createElementBlock } from "./index.fb0a2414.js"; 3const _sfc_main$1 = /* @__PURE__ */ defineComponent({ 4 __name: "Map", 5 props: { 6 region: { 7 type: String, 8 default: REGION.JEJU.code 9 }, 10 mapWidth: { 11 type: String, 12 default: "100%" 13 }, 14 mapHeight: { 15 type: String, 16 default: "400px" 17 }, 18 lat: { 19 type: Number, 20 default: 0 21 }, 22 lng: { 23 type: Number, 24 default: 0 25 }, 26 level: { 27 type: Number, 28 default: 0 29 }, 30 compName: { 31 type: String, 32 default: "" 33 } 34 }, 35 emits: [ 36 "runNextMap" 37 ], 38 setup(__props, { expose, emit }) { 39 const props = __props; 40 expose({ 41 getKakaoMapInstance, 42 setAddress, 43 getGoogleoMapInstance 44 }); 45 const runNextMap = () => { 46 emit("runNextMap"); 47 }; 48 const kakaoAppkey = "ed585047da0d8d227afcc08358d14e52"; 49 const googleApiKey = "AIzaSyCSIeAkcGa7aHcHYPrRU2MxpG34-Hz7jZM"; 50 const mapElement = ref(null); 51 let kakaoMapInstance;
52 let googleMapInstance; 53 let customOverlay; 54 let kakaoMarker; 55 async function loadKakaoMapScript() { 56 if (!window.kakao) { 57 return new Promise((resolve, reject) => { 58 const script = document.createElement("script"); 59 script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${kakaoAppkey}&autoload=false&libraries=services`; 60 script.onload = resolve; 61 script.onerror = reject; 62 document.head.appendChild(script); 63 }); 64 } 65 } 66 async function initializeKakaoMap() { 67 await loadKakaoMapScript(); 68 const { kakao: kakao2 } = window; 69 kakao2.maps.load(() => { 70 const { LatLng, Map, CustomOverlay, Marker, MarkerImage, Size, services } = kakao2.maps; 71 const centerCoords = new LatLng(props.lat, props.lng); 72 const mapOptions = { 73 center: centerCoords, 74 level: props.level > 0 ? props.level : 3 75 }; 76 kakaoMapInstance = new Map(mapElement.value, mapOptions); 77 if (kakaoMapInstance) { 78 let customOverlayContent; 79 const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); 80 if (isMobile) { 81 customOverlayContent = ` 82 <div style="border-radius: 7px; background-color: rgba(0, 0, 0, .7); padding: 4px 10px 3px; position: relative; font-size:13px; color: #fff; white-space: nowrap;"> 83 <div style="width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; position: absolute; bottom: -5px; left: calc(50% -4px);"></div> 84 <div style="width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid rgba(0, 0, 0, .7); position: absolute; bottom: -5px; left: calc(50% - 4px);"></div> 85 ${props.compName} 86 </div>`; 87 } else { 88 customOverlayContent = ` 89 <div style="border-radius: 12px; background-color: white; padding: 6px 15px; border: 1px solid #8F63E6; box-shadow: 1px 1px 5px rgba(0, 0, 0, .2); position: relative; color: #222; white-space: nowrap;"> 90 <div style="width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid #8F63E6; position: absolute; bottom: -10px; left: calc(50% - 7px);"></div> 91 <div style="width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid #fff; position: absolute; bottom: -8px; left: calc(50% - 7px);"></div> 92 ${props.compName} 93 </div>`; 94 } 95 customOverlay = new CustomOverlay({ 96 position: centerCoords, 97 content: customOverlayContent, 98 yAnchor: 2 99 }); 100 customOverlay.setMap(kakaoMapInstance); 101 if (isMobile) { 102 const markerImageUrl = "../../../pc/images/common/pin-marker.svg"; 103 const markerImage = new MarkerImage( 104 markerImageUrl, 105 new Size(22, 25) 106 ); 107 kakaoMarker = new Marker({ 108 position: centerCoords, 109 image: markerImage 110 }); 111 kakaoMarker.setMap(kakaoMapInstance); 112 } else { 113 const markerImageUrl = "../../../pc/images/common/pin-marker.svg"; 114 const markerImage = new MarkerImage( 115 markerImageUrl, 116 new Size(30, 30) 117 ); 118 kakaoMarker = new Marker({ 119 position: centerCoords, 120 image: markerImage 121 }); 122 kakaoMarker.setMap(kakaoMapInstance); 123 } 124 } 125 }); 126 runNextMap(); 127 } 128 async function loadGoogleMapScript() { 129 if (!window.google) { 130 return new Promise((resolve, reject) => { 131 const script = document.createElement("script"); 132 script.src = `//maps.googleapis.com/maps/api/js?key=${googleApiKey}`; 133 script.onload = resolve; 134 script.onerror = reject; 135 document.head.appendChild(script); 136 }); 137 } 138 } 139 async function initializeGoogleMap() { 140 await loadGoogleMapScript(); 141 const { google } = window; 142 const { Map, Marker, InfoWindow } = google.maps; 143 const centerCoords = { lat: props.lat, lng: props.lng }; 144 const mapOptions = { 145 center: centerCoords, 146 zoom: props.level > 0 ? props.level : 16 147 };
148 googleMapInstance = new Map(mapElement.value, mapOptions); 149 const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); 150 if (isMobile) { 151 if (googleMapInstance) { 152 const markerImageUrl = "../../../pc/images/common/pin-marker.svg"; 153 const marker = new Marker({ 154 position: centerCoords, 155 icon: { 156 url: markerImageUrl, 157 scaledSize: new google.maps.Size(22, 25) 158 }, 159 map: googleMapInstance, 160 minWidth: 200 161 }); 162 const infoWindowContent = `<div class="infoWindowMap" style="border-radius: 7px; background-color: rgba(0, 0, 0, .7); padding: 4px 10px 3px; position: absolute; top: -80px; left:-30px; font-size: 13px;color: #fff; white-space: nowrap;">${props.compName}</div>`; 163 const infoWindow = new InfoWindow({ 164 content: infoWindowContent, 165 maxWidth: 150 166 }); 167 const css = ` 168 .infoWindowMap::before { 169 content: ''; 170 display:block; 171 width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; position: absolute; bottom: -5px; left: calc(50% - 4px); 172 } 173 .infoWindowMap::after { 174 content: ''; 175 display:block; 176 width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid rgba(0, 0, 0, .7); position: absolute; bottom: -5px; left: calc(50% - 4px); 177 } 178 `; 179 const style = document.createElement("style"); 180 style.type = "text/css"; 181 style.appendChild(document.createTextNode(css)); 182 document.head.appendChild(style); 183 infoWindow.open(googleMapInstance, marker); 184 google.maps.event.addListenerOnce(infoWindow, "domready", () => { 185 const iwtc = document.querySelector(".gm-style-iw-tc"); 186 iwtc == null ? void 0 : iwtc.removeAttribute("class"); 187 const iwd = document.querySelector(".gm-style-iw-d"); 188 iwd == null ? void 0 : iwd.removeAttribute("class"); 189 const iwc = document.querySelector(".gm-style-iw.gm-style-iw-c"); 190 iwc == null ? void 0 : iwc.removeAttribute("class"); 191 const iwt = document.querySelector(".gm-style-iw-t"); 192 iwt == null ? void 0 : iwt.removeAttribute("class"); 193 const iwa = document.querySelector(".gm-style-iw-a"); 194 iwa == null ? void 0 : iwa.removeAttribute("class"); 195 const closeButton = document.querySelector(".gm-ui-hover-effect"); 196 closeButton == null ? void 0 : closeButton.remove(); 197 const infoWindowMap = document.querySelector(".infoWindowMap"); 198 const parentWidth = infoWindowMap == null ? void 0 : infoWindowMap.offsetWidth; 199 const parentHeight = infoWindowMap == null ? void 0 : infoWindowMap.offsetHeight; 200 const iwaWidth = iwa.offsetWidth; 201 const iwaHeight = iwa.offsetHeight; 202 const left = Math.round((parentWidth - iwaWidth) / 2); 203 const top = Math.round((parentHeight - iwaHeight) / 2) + 43; 204 infoWindowMap.style.left = `-${left}px`; 205 infoWindowMap.style.top = `-${top}px`; 206 }); 207 } 208 } else { 209 if (googleMapInstance) { 210 const markerImageUrl = "../../../pc/images/common/pin-marker.svg"; 211 const marker = new Marker({ 212 position: centerCoords, 213 icon: { 214 url: markerImageUrl, 215 scaledSize: new google.maps.Size(30, 30) 216 }, 217 map: googleMapInstance, 218 minWidth: 200 219 }); 220 const infoWindowContent = `<div class="infoWindowMap" style="border-radius: 12px; background-color: white; padding: 6px 15px; border: 1px solid #8F63E6; box-shadow: 1px 1px 5px rgba(0, 0, 0, .2); position: absolute; top: -80px; left:-30px; color: #222; white-space: nowrap;">${props.compName}</div>`; 221 const infoWindow = new InfoWindow({ 222 content: infoWindowContent, 223 maxWidth: 150 224 }); 225 const css = ` 226 .infoWindowMap::before { 227 content: ''; 228 display:block; 229 width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid #8F63E6; position: absolute; bottom: -10px; left: calc(50% - 7px); 230 } 231 .infoWindowMap::after { 232 content: ''; 233 display:block; 234 width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid #fff; position: absolute; bottom: -8px; left: calc(50% - 7px); 235 } 236 `; 237 const style = document.createElement("style"); 238 style.type = "text/css"; 239 style.appendChild(document.createTextNode(css)); 240 document.head.appendChild(style);
241 infoWindow.open(googleMapInstance, marker); 242 google.maps.event.addListenerOnce(infoWindow, "domready", () => { 243 const iwtc = document.querySelector(".gm-style-iw-tc"); 244 iwtc == null ? void 0 : iwtc.removeAttribute("class"); 245 const iwd = document.querySelector(".gm-style-iw-d"); 246 iwd == null ? void 0 : iwd.removeAttribute("class"); 247 const iwc = document.querySelector(".gm-style-iw.gm-style-iw-c"); 248 iwc == null ? void 0 : iwc.removeAttribute("class"); 249 const iwt = document.querySelector(".gm-style-iw-t"); 250 iwt == null ? void 0 : iwt.removeAttribute("class"); 251 const iwa = document.querySelector(".gm-style-iw-a"); 252 iwa == null ? void 0 : iwa.removeAttribute("class"); 253 const closeButton = document.querySelector(".gm-ui-hover-effect"); 254 closeButton == null ? void 0 : closeButton.remove(); 255 const infoWindowMap = document.querySelector(".infoWindowMap"); 256 if (infoWindowMap && infoWindowMap.parentElement && infoWindowMap.parentElement.parentElement) { 257 infoWindowMap.parentElement.parentElement.style.overflow = "hidden"; 258 } 259 const parentWidth = infoWindowMap == null ? void 0 : infoWindowMap.offsetWidth; 260 const parentHeight = infoWindowMap == null ? void 0 : infoWindowMap.offsetHeight; 261 const iwaWidth = iwa.offsetWidth; 262 const iwaHeight = iwa.offsetHeight; 263 const left = Math.round((parentWidth - iwaWidth) / 2) + 0; 264 const top = Math.round((parentHeight - iwaHeight) / 2) + 60; 265 infoWindowMap.style.left = `-${left}px`; 266 infoWindowMap.style.top = `-${top}px`; 267 }); 268 } 269 } 270 runNextMap(); 271 } 272 function getKakaoMapInstance() { 273 return kakaoMapInstance; 274 } 275 function setAddress(address, addressDetail) { 276 customOverlay.setMap(null); 277 kakaoMarker.setMap(null); 278 var geocoder = new kakao.maps.services.Geocoder(); 279 geocoder.addressSearch(address, function(result, status) { 280 if (status === kakao.maps.services.Status.OK) { 281 const fullAddress = address + " " + addressDetail; 282 var centerCoords = new kakao.maps.LatLng(result[0].y, result[0].x); 283 let customOverlayContent; 284 const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); 285 if (isMobile) { 286 customOverlayContent = ` 287 <div style="border-radius: 7px; background-color: rgba(0, 0, 0, .7); padding: 4px 10px 3px; position: relative; font-size:13px; color: #fff; white-space: nowrap;"> 288 <div style="width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; position: absolute; bottom: -5px; left: calc(50% -4px);"></div> 289 <div style="width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid rgba(0, 0, 0, .7); position: absolute; bottom: -5px; left: calc(50% - 4px);"></div> 290 ${fullAddress} 291 </div>`; 292 } else { 293 customOverlayContent = ` 294 <div style="border-radius: 12px; background-color: white; padding: 6px 15px; border: 1px solid #8F63E6; box-shadow: 1px 1px 5px rgba(0, 0, 0, .2); position: relative; color: #222; white-space: nowrap;"> 295 <div style="width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid #8F63E6; position: absolute; bottom: -10px; left: calc(50% - 7px);"></div> 296 <div style="width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid #fff; position: absolute; bottom: -8px; left: calc(50% - 7px);"></div> 297 ${fullAddress} 298 </div>`; 299 } 300 customOverlay = new kakao.maps.CustomOverlay({ 301 position: centerCoords, 302 content: customOverlayContent, 303 yAnchor: 2 304 }); 305 customOverlay.setMap(kakaoMapInstance); 306 if (isMobile) { 307 const markerImageUrl = "../../../pc/images/common/pin-marker.svg"; 308 const markerImage = new kakao.maps.MarkerImage( 309 markerImageUrl, 310 new kakao.maps.Size(22, 25) 311 ); 312 kakaoMarker = new kakao.maps.Marker({ 313 position: centerCoords, 314 image: markerImage 315 }); 316 kakaoMapInstance.setCenter(centerCoords); 317 kakaoMarker.setMap(kakaoMapInstance); 318 } else { 319 const markerImageUrl = "../../../pc/images/common/pin-marker.svg"; 320 const markerImage = new kakao.maps.MarkerImage( 321 markerImageUrl, 322 new kakao.maps.Size(30, 30) 323 ); 324 kakaoMarker = new kakao.maps.Marker({ 325 position: centerCoords, 326 image: markerImage 327 }); 328 kakaoMapInstance.setCenter(centerCoords); 329 kakaoMarker.setMap(kakaoMapInstance); 330 } 331 } 332 }); 333 } 334 function getGoogleoMapInstance() {
335 return googleMapInstance; 336 } 337 onUpdated(() => { 338 if (props.region === REGION.JEJU.code || props.region === REGION.INLAND.code) { 339 initializeKakaoMap().catch((error) => { 340 console.log(error); 341 }); 342 } else { 343 initializeGoogleMap().catch((error) => { 344 console.log(error); 345 }); 346 } 347 }); 348 onMounted(() => { 349 if (props.region === REGION.JEJU.code || props.region === REGION.INLAND.code) { 350 initializeKakaoMap().catch((error) => { 351 console.log(error); 352 }); 353 } else { 354 initializeGoogleMap().catch((error) => { 355 console.log(error); 356 }); 357 } 358 }); 359 return (_ctx, _cache) => { 360 return openBlock(), createElementBlock("div", { 361 style: { "width": "100%", "height": "300px" }, 362 ref_key: "mapElement", 363 ref: mapElement, 364 class: "map" 365 }, null, 512); 366 }; 367 } 368}); 369const _sfc_main = /* @__PURE__ */ defineComponent({ 370 __name: "Map2", 371 props: { 372 region: { 373 type: String, 374 default: REGION.JEJU.code 375 }, 376 mapWidth: { 377 type: String, 378 default: "100%" 379 }, 380 mapHeight: { 381 type: String, 382 default: "400px" 383 }, 384 lat: { 385 type: Number, 386 default: 0 387 }, 388 lng: { 389 type: Number, 390 default: 0 391 }, 392 level: { 393 type: Number, 394 default: 0 395 }, 396 compName: { 397 type: String, 398 default: "" 399 } 400 }, 401 setup(__props, { expose }) { 402 const props = __props; 403 expose({ 404 getKakaoMapInstance, 405 setAddress, 406 getGoogleoMapInstance 407 }); 408 const mapElement2 = ref(null); 409 let kakaoMapInstance;
410 let googleMapInstance; 411 let customOverlay; 412 let kakaoMarker; 413 async function initializeKakaoMap() { 414 const { kakao: kakao2 } = window; 415 kakao2.maps.load(() => { 416 const { LatLng, Map, CustomOverlay, Marker, MarkerImage, Size, services } = kakao2.maps; 417 const centerCoords = new LatLng(props.lat, props.lng); 418 const mapOptions = { 419 center: centerCoords, 420 level: props.level > 0 ? props.level : 3 421 }; 422 kakaoMapInstance = new Map(mapElement2.value, mapOptions); 423 if (kakaoMapInstance) { 424 let customOverlayContent; 425 const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); 426 if (isMobile) { 427 customOverlayContent = ` 428 <div style="border-radius: 7px; background-color: rgba(0, 0, 0, .7); padding: 4px 10px 3px; position: relative; font-size:13px; color: #fff; white-space: nowrap;"> 429 <div style="width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; position: absolute; bottom: -5px; left: calc(50% -4px);"></div> 430 <div style="width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid rgba(0, 0, 0, .7); position: absolute; bottom: -5px; left: calc(50% - 4px);"></div> 431 ${props.compName} 432 </div>`; 433 } else { 434 customOverlayContent = ` 435 <div style="border-radius: 12px; background-color: white; padding: 6px 15px; border: 1px solid #8F63E6; box-shadow: 1px 1px 5px rgba(0, 0, 0, .2); position: relative; color: #222; white-space: nowrap;"> 436 <div style="width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid #8F63E6; position: absolute; bottom: -10px; left: calc(50% - 7px);"></div> 437 <div style="width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid #fff; position: absolute; bottom: -8px; left: calc(50% - 7px);"></div> 438 ${props.compName} 439 </div>`; 440 } 441 customOverlay = new CustomOverlay({ 442 position: centerCoords, 443 content: customOverlayContent, 444 yAnchor: 2 445 }); 446 customOverlay.setMap(kakaoMapInstance); 447 if (isMobile) { 448 const markerImageUrl = "../../../pc/images/common/pin-marker.svg"; 449 const markerImage = new MarkerImage( 450 markerImageUrl, 451 new Size(22, 25) 452 ); 453 kakaoMarker = new Marker({ 454 position: centerCoords, 455 image: markerImage 456 }); 457 kakaoMarker.setMap(kakaoMapInstance); 458 } else { 459 const markerImageUrl = "../../../pc/images/common/pin-marker.svg"; 460 const markerImage = new MarkerImage( 461 markerImageUrl, 462 new Size(30, 30) 463 ); 464 kakaoMarker = new Marker({ 465 position: centerCoords, 466 image: markerImage 467 }); 468 kakaoMarker.setMap(kakaoMapInstance); 469 } 470 } 471 }); 472 } 473 async function initializeGoogleMap() { 474 const { google } = window; 475 const { Map, Marker, InfoWindow } = google.maps; 476 const centerCoords = { lat: props.lat, lng: props.lng }; 477 const mapOptions = { 478 center: centerCoords, 479 zoom: props.level > 0 ? props.level : 16 480 }; 481 googleMapInstance = new Map(mapElement2.value, mapOptions); 482 const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); 483 if (isMobile) { 484 if (googleMapInstance) { 485 const markerImageUrl = "../../../pc/images/common/pin-marker.svg"; 486 const marker = new Marker({ 487 position: centerCoords, 488 icon: { 489 url: markerImageUrl, 490 scaledSize: new google.maps.Size(22, 25) 491 }, 492 map: googleMapInstance, 493 minWidth: 200 494 }); 495 const infoWindowContent = `<div class="infoWindowJp" style="border-radius: 7px; background-color: rgba(0, 0, 0, .7); padding: 4px 10px 3px; position: absolute; top: -57px; left:-44px; font-size: 13px;color: #fff; white-space: nowrap;">${props.compName}</div>`; 496 const infoWindow = new InfoWindow({ 497 content: infoWindowContent, 498 maxWidth: 150 499 }); 500 const css = ` 501 .infoWindowJp::before { 502 content: ''; 503 display:block; 504 width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; position: absolute; bottom: -5px; left: calc(50% - 4px); 505 } 506 .infoWindowJp::after { 507 content: ''; 508 display:block; 509 width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid rgba(0, 0, 0, .7); position: absolute; bottom: -5px; left: calc(50% - 4px); 510 } 511 `; 512 const style = document.createElement("style"); 513 style.type = "text/css"; 514 style.appendChild(document.createTextNode(css)); 515 document.head.appendChild(style);
516 infoWindow.open(googleMapInstance, marker); 517 google.maps.event.addListenerOnce(infoWindow, "domready", () => { 518 const iwtc = document.querySelector(".gm-style-iw-tc"); 519 iwtc == null ? void 0 : iwtc.removeAttribute("class"); 520 const iwd = document.querySelector(".gm-style-iw-d"); 521 iwd == null ? void 0 : iwd.removeAttribute("class"); 522 const iwc = document.querySelector(".gm-style-iw.gm-style-iw-c"); 523 iwc == null ? void 0 : iwc.removeAttribute("class"); 524 const iwt = document.querySelector(".gm-style-iw-t"); 525 iwt == null ? void 0 : iwt.removeAttribute("class"); 526 const iwa = document.querySelector(".gm-style-iw-a"); 527 iwa == null ? void 0 : iwa.removeAttribute("class"); 528 const closeButton = document.querySelector(".gm-ui-hover-effect"); 529 closeButton == null ? void 0 : closeButton.remove(); 530 const infoWindowJp = document.querySelector(".infoWindowJp"); 531 const parentWidth = infoWindowJp == null ? void 0 : infoWindowJp.offsetWidth; 532 const parentHeight = infoWindowJp == null ? void 0 : infoWindowJp.offsetHeight; 533 const iwaWidth = iwa.offsetWidth; 534 const iwaHeight = iwa.offsetHeight; 535 const left = Math.round((parentWidth - iwaWidth) / 2); 536 const top = Math.round((parentHeight - iwaHeight) / 2) + 43; 537 infoWindowJp.style.left = `-${left}px`; 538 infoWindowJp.style.top = `-${top}px`; 539 }); 540 } 541 } else { 542 if (googleMapInstance) { 543 const markerImageUrl = "../../../pc/images/common/pin-marker.svg"; 544 const marker = new Marker({ 545 position: centerCoords, 546 icon: { 547 url: markerImageUrl, 548 scaledSize: new google.maps.Size(30, 30) 549 }, 550 map: googleMapInstance, 551 minWidth: 200 552 }); 553 const infoWindowContent = `<div class="infoWindowJp" style="border-radius: 12px; background-color: white; padding: 6px 15px; border: 1px solid #8F63E6; box-shadow: 1px 1px 5px rgba(0, 0, 0, .2); position: absolute; top: -80px; left:-57px; color: #222; white-space: nowrap;">${props.compName}</div>`; 554 const infoWindow = new InfoWindow({ 555 content: infoWindowContent, 556 maxWidth: 150 557 }); 558 const css = ` 559 .infoWindowJp::before { 560 content: ''; 561 display:block; 562 width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid #8F63E6; position: absolute; bottom: -10px; left: calc(50% - 7px); 563 } 564 .infoWindowJp::after { 565 content: ''; 566 display:block; 567 width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid #fff; position: absolute; bottom: -8px; left: calc(50% - 7px); 568 } 569 `; 570 const style = document.createElement("style"); 571 style.type = "text/css"; 572 style.appendChild(document.createTextNode(css)); 573 document.head.appendChild(style); 574 infoWindow.open(googleMapInstance, marker); 575 google.maps.event.addListenerOnce(infoWindow, "domready", () => { 576 const iwtc = document.querySelector(".gm-style-iw-tc"); 577 iwtc == null ? void 0 : iwtc.removeAttribute("class"); 578 const iwd = document.querySelector(".gm-style-iw-d"); 579 iwd == null ? void 0 : iwd.removeAttribute("class"); 580 const iwc = document.querySelector(".gm-style-iw.gm-style-iw-c"); 581 iwc == null ? void 0 : iwc.removeAttribute("class"); 582 const iwt = document.querySelector(".gm-style-iw-t"); 583 iwt == null ? void 0 : iwt.removeAttribute("class"); 584 const iwa = document.querySelector(".gm-style-iw-a"); 585 iwa == null ? void 0 : iwa.removeAttribute("class"); 586 const closeButton = document.querySelector(".gm-ui-hover-effect"); 587 closeButton == null ? void 0 : closeButton.remove(); 588 const infoWindowJp = document.querySelector(".infoWindowJp"); 589 if (infoWindowJp && infoWindowJp.parentElement && infoWindowJp.parentElement.parentElement) { 590 infoWindowJp.parentElement.parentElement.style.overflow = "hidden"; 591 } 592 const parentWidth = infoWindowJp == null ? void 0 : infoWindowJp.offsetWidth; 593 const parentHeight = infoWindowJp == null ? void 0 : infoWindowJp.offsetHeight; 594 const iwaWidth = iwa.offsetWidth; 595 const iwaHeight = iwa.offsetHeight; 596 const left = Math.round((parentWidth - iwaWidth) / 2) + 0; 597 const top = Math.round((parentHeight - iwaHeight) / 2) + 60; 598 infoWindowJp.style.left = `-${left}px`; 599 infoWindowJp.style.top = `-${top}px`; 600 }); 601 } 602 } 603 } 604 function getKakaoMapInstance() { 605 return kakaoMapInstance; 606 } 607 function setAddress(address, addressDetail) { 608 customOverlay.setMap(null); 609 kakaoMarker.setMap(null); 610 var geocoder = new kakao.maps.services.Geocoder(); 611 geocoder.addressSearch(address, function(result, status) { 612 if (status === kakao.maps.services.Status.OK) { 613 const fullAddress = address + " " + addressDetail; 614 var centerCoords = new kakao.maps.LatLng(result[0].y, result[0].x); 615 let customOverlayContent; 616 const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); 617 if (isMobile) { 618 customOverlayContent = ` 619 <div style="border-radius: 7px; background-color: rgba(0, 0, 0, .7); padding: 4px 10px 3px; position: relative; font-size:13px; color: #fff; white-space: nowrap;"> 620 <div style="width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; position: absolute; bottom: -5px; left: calc(50% -4px);"></div> 621 <div style="width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid rgba(0, 0, 0, .7); position: absolute; bottom: -5px; left: calc(50% - 4px);"></div> 622 ${fullAddress} 623 </div>`; 624 } else { 625 customOverlayContent = ` 626 <div style="border-radius: 12px; background-color: white; padding: 6px 15px; border: 1px solid #8F63E6; box-shadow: 1px 1px 5px rgba(0, 0, 0, .2); position: relative; color: #222; white-space: nowrap;"> 627 <div style="width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid #8F63E6; position: absolute; bottom: -10px; left: calc(50% - 7px);"></div> 628 <div style="width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid #fff; position: absolute; bottom: -8px; left: calc(50% - 7px);"></div> 629 ${fullAddress} 630 </div>`; 631 } 632 customOverlay = new kakao.maps.CustomOverlay({ 633 position: centerCoords, 634 content: customOverlayContent, 635 yAnchor: 2 636 }); 637 customOverlay.setMap(kakaoMapInstance); 638 if (isMobile) { 639 const markerImageUrl = "../../../pc/images/common/pin-marker.svg"; 640 const markerImage = new kakao.maps.MarkerImage( 641 markerImageUrl, 642 new kakao.maps.Size(22, 25) 643 ); 644 kakaoMarker = new kakao.maps.Marker({ 645 position: centerCoords, 646 image: markerImage 647 }); 648 kakaoMapInstance.setCenter(centerCoords); 649 kakaoMarker.setMap(kakaoMapInstance); 650 } else { 651 const markerImageUrl = "../../../pc/images/common/pin-marker.svg"; 652 const markerImage = new kakao.maps.MarkerImage( 653 markerImageUrl, 654 new kakao.maps.Size(30, 30) 655 ); 656 kakaoMarker = new kakao.maps.Marker({ 657 position: centerCoords, 658 image: markerImage 659 }); 660 kakaoMapInstance.setCenter(centerCoords); 661 kakaoMarker.setMap(kakaoMapInstance); 662 } 663 } 664 }); 665 } 666 function getGoogleoMapInstance() {
667 return googleMapInstance; 668 } 669 onUpdated(() => { 670 if (props.region === REGION.JEJU.code || props.region === REGION.INLAND.code) { 671 initializeKakaoMap().catch((error) => { 672 console.log(error); 673 }); 674 } else { 675 initializeGoogleMap().catch((error) => { 676 console.log(error); 677 }); 678 } 679 }); 680 onMounted(() => { 681 if (props.region === REGION.JEJU.code || props.region === REGION.INLAND.code) { 682 initializeKakaoMap().catch((error) => { 683 console.log(error); 684 }); 685 } else { 686 initializeGoogleMap().catch((error) => { 687 console.log(error); 688 }); 689 } 690 }); 691 return (_ctx, _cache) => { 692 return openBlock(), createElementBlock("div", { 693 style: { "width": "100%", "height": "300px" }, 694 ref_key: "mapElement2", 695 ref: mapElement2, 696 class: "map" 697 }, null, 512); 698 }; 699 } 700}); 701export { 702 _sfc_main$1 as _, 703 _sfc_main as a 704};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.