Created
June 8, 2020 06:01
-
-
Save dev-jonghoonpark/7ebe04639627f51a3c5cf310f14d22c5 to your computer and use it in GitHub Desktop.
네이버지도 버그 구현 코드
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=<<yourId>>&submodules=panorama"></script> | |
| <script> | |
| var pano = null; | |
| naver.maps.onJSContentLoaded = function() { | |
| pano = new naver.maps.Panorama("pano", { | |
| position: new naver.maps.LatLng(37.3599605, 127.1058814), | |
| pov: { | |
| pan: -135, | |
| tilt: 29, | |
| fov: 100 | |
| } | |
| }); | |
| }; | |
| </script> | |
| <style> | |
| .pano-wrapper { | |
| position: relative; | |
| } | |
| .pano-wrapper, | |
| #pano { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .close-btn { | |
| position: absolute; | |
| right: 1rem; | |
| top: 1rem; | |
| width: 36px; | |
| height: 36px; | |
| z-index: 1000000000000000000000000; | |
| background: #484848; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="pano-wrapper"> | |
| <div id="pano"></div> | |
| <div class="close-btn"></div> | |
| </div> | |
| </body> | |
| </html> |
[해결법]
.close-btn 에 transform: translate3d(0, 0, 0); 추가하여 해결
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
[제목]
네이버 맵 파라노마 - 각도에 따른 상단 DIV - 각도에 따른 상단 absolute div 사라짐 관련 문의
[내용]
각도에 따라 파노라마의 상단에 띄워둔 absolute div 가 사라지는 문제가 있습니다.
z-index문제일까 싶어 충분한 수를 입력해 주었음에도 해당 문제가 발생하여 문의를 남깁니다.
상황1에서 각도를 살짝 틀어 상황2와 같이 되었을때 우측상단의 div가 사라지는 현상이 있었습니다
한 각도에서만 그런건 아니고 여러 각도에서 그렇습니다.
개발자 도구를 살펴보니 cube face의 canvas 와 관련된 이슈인것 같은데 그 이상은 확인이 어렵네요...
테스트 코드는
https://gist.github.com/chooco13/7ebe04639627f51a3c5cf310f14d22c5
에 올려두었고
ncpClientId는 지워둬서 테스트 하실때는 넣고 입력해주시면 되겠습니다.
감사합니다.
[답변]
안녕하세요.
네이버 클라우드 플랫폼입니다.
문의하신 내용에 대해 답변드립니다.
파노라마 뷰어 영역은 CSS 하드웨어 가속 속성(perspective 등)을 사용하고 있어
해당 영역 위에 버튼등을 표시하고자 할 때 강제로 하드웨어 가속을 시켜줘야 합니다.
가장 쉬운 해결 방법은 close-btn에 translate3d 속성을 추가하여 해결하실 수 있습니다.
안내해드린 답변이 도움이 되셨길 바라며,
더 궁금한 사항이 있으시면 언제든지 고객지원으로 문의 부탁드립니다.
감사합니다.
네이버 클라우드 플랫폼 드림.