안녕하세요
정보가 없어 구글링 끝에 개발자 포럼에 질문드립니다 ㅠㅠ
정보창에 대한 글씨가 표시가 안되어 질문드립니다.
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>
