mapContents.vue
<template>
<div id="map"></div>
</template>
<script>
export default {
mounted() {
window.kakao && window.kakao.maps ? this.initMap() : this.addScript();
},
methods: {
initMap() {
const mapContainer = document.getElementById('map'),
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3
};
const map = new kakao.maps.Map(mapContainer, mapOption);
const mapTypeControl = new kakao.maps.MapTypeControl();
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
const zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
},
addScript() {
const script = document.createElement("script")
script.onload = () => kakao.maps.load(this.initMap);
script.src = '//dapi.kakao.com/v2/maps/sdk.js?appkey=7a072c209a53972b96bc1e68817720c1&libraries=services'
document.head.appendChild(script)
}
}
}
</script>
<style>
#mapContent {
width: 500px;
height: 500px;
z-index: 10000;
border: 3px solid blue;
display: block;
position: relative;
top: 300px;
}
.titleText {
display: inline-block;
position: relative;
margin-top: 25px;
margin-bottom: 20px;
background-color: #d4f3ffa4;
}
.mapsWrap {
display: block;
position: absolute;
float: left;
margin-right: 560px;
bottom: 60px;
}
.mapsWrap > h2 {
display: inline-block;
position: relative;
right: 120px;
text-align: center;
background-color: #bfff8f;
clear: both;
}
#mapContents {
position: relative;
width: 1000px;
height: 736px;
display: block;
background: #2e2e2e;
top: 60px;
right: 280px;
font-size: 15px;
font-weight: 400;
margin-left: 320px;
background-color: #87ceeb;
float: left;
}
.hAddr {
position: absolute;
display: block;
font-family: 'Titillium Web', sans-serif;
font-weight: 600;
left: 10px;
top: 5px;
border-radius: 2px;
background: #ffffffcc;
z-index: 10;
padding: 10px;
}
.hAddr > .addressWrap {
display: inline-block;
position: relative;
}
.title {
font-weight: 700;
display: block;
position: relative;
}
#centerAddr {
display: block;
position: relative;
margin-top: 2px;
font-weight: normal;
}
.bAddr {
padding-bottom: 36px;
padding-left: 10px;
padding-right: 10px;
text-overflow: ellipsis;
white-space: normal;
}
#category {
position: absolute;
display: block;
top: 80px;
margin-left: -55px;
border-radius: 5px;
border: 1px solid #909090;
box-shadow: 0 1px 1px #00000066;
background: #fff;
overflow: hidden;
z-index: 2;
}
#category li {
position: relative;
display: block;
float: left;
list-style: none;
width: 50px;
border-right: 1px solid #acacac;
padding: 5px 5px 5px 5px;
text-align: center;
cursor: pointer;
}
#category li.on {
background: #eee;
}
#category li:hover {
background: #ffe6e6;
border-left: 1px solid #acacac;
margin-left: -1px;
}
#category li:last-child {
margin-right: 0;
border-right: 0;
}
#category li span {
display: block;
margin: 0 auto 3px;
width: 27px;
height: 28px;
}
#category li .category_bg {
background: url("https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_category.png")
no-repeat;
}
#category li .bank {
background-position: -10px 0;
}
#category li .mart {
background-position: -10px -36px;
}
#category li .pharmacy {
background-position: -10px -72px;
}
#category li .oil {
background-position: -10px -108px;
}
#category li .cafe {
background-position: -10px -144px;
}
#category li .store {
background-position: -10px -180px;
}
#category li.on .category_bg {
background-position-x: -46px;
}
.placeinfo_wrap {
position: absolute;
bottom: 28px;
left: -150px;
width: 300px;
}
.placeinfo {
position: relative;
width: 100%;
border-radius: 6px;
border: 1px solid #ccc;
border-bottom: 2px solid #ddd;
padding-bottom: 10px;
background: #fff;
}
.placeinfo:nth-of-type(n) {
border: 0;
box-shadow: 0px 1px 2px #888;
}
.placeinfo_wrap .after {
content: '';
position: relative;
margin-left: -12px;
left: 50%;
width: 22px;
height: 12px;
background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')
}
.placeinfo a, .placeinfo a:hover, .placeinfo a:active{
color: #fff;
text-decoration: none;
}
.placeinfo a, .placeinfo span {
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.placeinfo span {
margin: 5px 5px 0 5px;
cursor: default;
font-size:13px;
}
.placeinfo .title {
font-weight: bold;
font-size: 14px;
border-radius: 6px 6px 0 0;
margin: -1px -1px 0 -1px;
padding: 10px;
color: #fff;
background: #d95050;
background: #d95050 url("https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/arrow_white.png")
no-repeat right 14px center;
}
.placeinfo .tel {
color: #0f7833;
}
.placeinfo .jibun {
color: #999;
font-size: 11px;
margin-top: 0;
}
</style>
다음과 같이 코드를 작성하고 실행해서 크롬 브라우저로 보니까
Uncaught RangeError: Maximum call stack size exceeded 오류가 뜨던데 어디서부터 꼬인 걸까요…