Jump to content

byungwoo kim

Members
  • 게시글

    2
  • 첫 방문

  • 최근 방문

  • Days Won

    1

Everything posted by byungwoo kim

  1. 해결했습니다. css에서 .map{font-size:0px} 이 문제였습니다. 삭제하여서 해결했습니다
  2. 안녕하세요 정보가 없어 구글링 끝에 개발자 포럼에 질문드립니다 ㅠㅠ 정보창에 대한 글씨가 표시가 안되어 질문드립니다. contentString 안에 styles에 대한 정보는 입력이 되는데 태그 안에 내용이 출력이 안됩니다. contentString의 값을 '<div style="width:100px;height:100px;"><p>123123</p></div>'.로 했을시 아래와 같고 contentString의 값을 '<div><p>123123</p></div>'.로 했을시 아래와 같습니다. namespace 도큐먼트도 읽고 zindex 값 또한 변경해봤지만 그대로입니다. 혹시 해결방법을 좀 알 수 있을까요? 혹시 몰라 전체 코드도 첨부합니다. <template> <div class="bg"> <div class="map-controller"> <div class="my-location"> <button type="submit" @click="updateCenter"><span>현재위치</span></button> </div> <div class="button-group-zoom"> <button type="submit" @click="zoomIn"><span>줌인</span></button> </div> <div class="button-group-zoom"> <button type="submit" @click="zoomOut"><span>줌아웃</span></button> </div> </div> <div class="searchbar"> <input type="search" placeholder="동/읍/면을 입력해주세요"> <button type="submit"><span>검색</span></button> </div> <div class="map" ref="map"> </div> </div> </template> <script> export default { data() { return { map: null, zoom: 10, latitude: 37.3595704, longitude: 127.105399, marker: null, //////////////////////////////////// 이부분이 입력이 잘안됩니다. infowindow: null, contentString: '<div style="width:100px;height:100px;"><p>123123</p></div>', /////////////////////////////////// }; }, mounted() { // Load the Naver Maps JavaScript API const script = document.createElement("script"); script.src = "https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=######################"; script.async = true; script.onload = () => this.initializeMap(); document.head.appendChild(script); }, methods: { initializeMap() { // Initialize the map const mapOptions = { center: new window.naver.maps.LatLng(this.latitude, this.longitude), zoom: this.zoom, }; this.map = new window.naver.maps.Map(this.$refs.map, mapOptions); this.marker = new window.naver.maps.Marker({ map: this.map, position: new window.naver.maps.LatLng(this.latitude, this.longitude), }); this.infowindow = new window.naver.maps.InfoWindow({ content: this.contentString }); window.naver.maps.Event.addListener(this.marker, 'click', (e) => { if (this.infowindow.getMap()) { this.infowindow.close(); } else { this.infowindow.open(this.map, this.marker); } }); }, zoomIn() { this.zoom += 1; this.map.setZoom(this.zoom); }, zoomOut() { this.zoom = Math.max(1, this.zoom - 1); this.map.setZoom(this.zoom); }, updateCenter() { // Update the center coordinates based on the input values const newCenter = new window.naver.maps.LatLng(this.latitude, this.longitude); this.map.setCenter(newCenter); }, }, }; </script> <style> body{ margin : 0; padding : 0; } div{ } .bg{ position: relative; } .map{ width: 100%; height: 100vh; font-size: 0px; margin: 0; padding : 0; position: absolute; z-index: 1; } .searchbar{ display: flex; margin-top: 30px; margin-left : 30px; position: absolute; z-index: 2; } .map-controller{ display: flex; flex-direction: column; margin-top: 30px; right: 10%; position: absolute; z-index: 2; align-items: center; } </style>
×
×
  • Create New...