File name
Commit message
Commit date
File name
Commit message
Commit date
2022-11-06
File name
Commit message
Commit date
<template>
<div>
<div id="map" class="map"></div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
mounted() {
window.kakao && window.kakao.maps
? this.loadMap()
: this.addKakaoMapScript();
},
methods: {
addKakaoMapScript() {
const script = document.createElement("script");
/* global kakao */
script.onload = () => kakao.maps.load(this.loadMap);
script.src =
"http://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=d0f88d63bd41b545d08ea9984995f082";
document.head.appendChild(script);
},
loadMap() {
var mapContainer = document.getElementById("map"); //지도를 담을 영역의 DOM 레퍼런스
var map = {
//지도를 생성할 때 필요한 기본 옵션
center: new kakao.maps.LatLng(35.87172388583504, 128.55915532852885), //지도의 중심좌표.
level: 5, //지도의 레벨(확대, 축소 정도)
};
var map = new kakao.maps.Map(mapContainer, map); //지도 생성 및 객체 리턴
// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
},
zoomControl() {},
},
};
</script>
<style>
.map {
width: 100%;
height: 866px;
}
</style>