' ].join(''); var infowindow = infowindowMap.get(m.key); if(!infowindow){ infowindowMap.set(m.key, new naver.maps.InfoWindow({ content : contentString })); } infowindowMap.get(m.key).open(map, m); }); naver.maps.Event.addListener(marker, 'mouseout', function (e) { var m = e.overlay; var infowindow = infowindowMap.get(m.key); if(infowindow){ infowindow.close(); } }); }); // 최초 서울(기본)로 마커 설정 markerMap.get(searchRprsRgnCd).setIcon('/static/map/img/marker-red.png'); markerMap.get(searchRprsRgnCd).setAnimation(naver.maps.Animation.BOUNCE); } makeMarker(); // e: 지도 // s: 팝업 // 쿠키가 있을경우 첫 번째 팝업 띄우지 않기 let locIntrdnCookie = getCookie("locIntrdnCookie"); if(!locIntrdnCookie && searchVcontsId == 0) { $vk.popup.open({ id: 'destPop-01', url: '/svc/whereToGo/locIntrdn/locIntrdnPopup.do', data: { }, callback: function(data){ } }, '.destinations__section'); } else { viewPopupByDeviceType(searchRprsRgnCd); if(searchVcontsId > 0){ locIntrdnViewPopup(searchRprsRgnCd); $vk.popup.empty('destPop-04'); $vk.popup.open({ id: 'destPop-04', url: '/svc/whereToGo/locIntrdn/rgnContentsViewPopup.do', data: { 'vcontsId': searchVcontsId, }, callback: function(data){ } }); } else { viewPopupByDeviceType(searchRprsRgnCd); } } // e: 팝업});function fn_saveLikeConts_before(obj){ fn_saveLikeConts(obj);}function fn_goContentsView(vcontsId, menuSn){var $form = $("
");$form.attr("method", "get");$form.attr("action", "/svc/contents/contentsView.do"); $form.attr("target", "_self"); $form.append($("")); $form.append($("")); $form.appendTo('body'); $form.submit();}//프로모션 상세 팝업function promotionViewPopup(marktContsSn){ $vk.popup.open({ id: 'promotionViewPopup', url: '/svc/thingsToGo/marktConts/promotionViewPopup.do', data: { marktContsSn: marktContsSn }, callback: function(data){ } });}function locIntrdnViewPopup(rprsRgnCd) { initMark(rprsRgnCd); $vk.popup.empty('destPop-02'); $vk.popup.open({ id: 'destPop-02', url: '/svc/whereToGo/locIntrdn/locIntrdnViewPopup.do', classes: ['destinations__toggle__section', 'js-toggle-section', 'is-toggle-up'], data: { rprsRgnCd: rprsRgnCd, vcontsId: searchVcontsId }, callback: function(data){ } }, '.destinations__fixdlay');}function locIntrdnMoViewPopup(rprsRgnCd) { initMark(rprsRgnCd); $vk.popup.empty('destPop-02-mo'); $vk.popup.open({ id: 'destPop-02-mo', url: '/svc/whereToGo/locIntrdn/locIntrdnMoViewPopup.do', data: { rprsRgnCd: rprsRgnCd, vcontsId: searchVcontsId }, callback: function(data){ } }, '.destinations__fixdlay');}function viewPopupByDeviceType(rprsRgnCd){ if(deviceType == 'pc'){ locIntrdnViewPopup(rprsRgnCd); }else if(deviceType == 'mo') { locIntrdnMoViewPopup(rprsRgnCd); }}function initMark(rprsRgnCd) { let oldMarker; if(rprsRgnCd){ markerMap.forEach((marker) => { if(marker.getAnimation() != null) { oldMarker = marker; } }); if(oldMarker && oldMarker.key != rprsRgnCd) { oldMarker.setIcon('/static/map/img/marker-default.png'); oldMarker.setAnimation(null); oldMarker.setZIndex(1); } let newMarker = markerMap.get(rprsRgnCd); newMarker.setIcon('/static/map/img/marker-red.png'); newMarker.setZIndex(10); newMarker.setAnimation(naver.maps.Animation.BOUNCE); } else { markerMap.forEach((marker) => { marker.setIcon('/static/map/img/marker-default.png'); marker.setAnimation(null); marker.setZIndex(1); }); }}
I'm a seasoned web developer and enthusiast in the field of web mapping applications. Having spent several years working on diverse projects involving mapping technologies, I've acquired extensive knowledge in JavaScript, particularly in the context of web mapping libraries like Naver Maps API.
Now, let's break down the provided code and discuss the concepts involved:
-
Naver Maps API Integration:
- The code integrates the Naver Maps API for displaying maps and markers.
- It utilizes markers to pinpoint locations on the map.
-
Event Handling:
- Event listeners are set up for the markers, specifically for 'mouseover' and 'mouseout' events.
- When a marker is hovered over, it triggers a pop-up with information associated with that marker.
- When the mouse is moved away from the marker, the pop-up is closed.
-
Marker Customization:
- The markers are customized with different icons and animations.
- The default marker icon is set to '/static/map/img/marker-default.png'.
- The active marker icon is set to '/static/map/img/marker-red.png'.
- Bounce animation is applied to the active marker using
naver.maps.Animation.BOUNCE.
-
Pop-up Handling:
- Information windows (pop-ups) are associated with each marker.
- The content of the pop-up is dynamically generated and displayed when a marker is hovered over.
-
Cookie Handling:
- The code checks for the presence of a cookie (
locIntrdnCookie) to determine whether to display a pop-up. - If the cookie is not present and a specific condition (
searchVcontsId == 0) is met, a pop-up is displayed.
- The code checks for the presence of a cookie (
-
Popup Display Logic:
- Pop-ups are displayed based on certain conditions, including the absence of a cookie and the value of
searchVcontsId.
- Pop-ups are displayed based on certain conditions, including the absence of a cookie and the value of
-
Function Definitions:
- Several functions are defined for handling different aspects of the application, such as saving liked content, navigating to content views, and handling pop-ups.
-
Device Type Handling:
- The code checks the device type (
deviceType) to determine which version of the pop-up to display (desktop or mobile).
- The code checks the device type (
-
Marker Initialization and Update:
- The
makeMarkerfunction initializes markers on the map, and theinitMarkfunction updates the markers based on the region code.
- The
-
Promotion View Pop-up:
- There's a function (
promotionViewPopup) for displaying a pop-up related to promotions.
- There's a function (
In summary, the code is a comprehensive implementation of a web mapping application using Naver Maps API. It involves marker customization, pop-up handling, event listeners, cookie management, and device-specific pop-up display logic. The modular structure of the code suggests a well-organized approach to building interactive mapping applications.
