정보창 표시 관련 질문

[byungwoo kim]

안녕하세요

정보가 없어 구글링 끝에 개발자 포럼에 질문드립니다 ㅠㅠ

정보창에 대한 글씨가 표시가 안되어 질문드립니다.

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>

 

[byungwoo kim]

해결했습니다.

css에서 .map{font-size:0px} 이 문제였습니다.

삭제하여서 해결했습니다

Edited December 10, 2023 by byungwoo kim