vue-daum-map 은 공식적으로 저희가 제공한 vue component가 아니므로
해당 문제에 대해 답변드리기 어렵습니다.
vue-daum-map을 쓰지 않은 테스트 코드를 첨부해 드리며
지도 중심을 잡아주는 코드를 중점으로 구현된 코드임을 감안하시고 직접 손 보아 사용하시길 바랍니다.
KakaoMap.vue:
<template>
<div ref="map"></div>
</template>
<script>
/* global kakao */
export default {
name: 'KakaoMap',
props: {
appkey: {
type: String,
required: true
},
width: {
type: Number,
default: 400
},
height: {
type: Number,
default: 300
},
center: {
type: Array,
required: true
},
level: {
type: Number
},
isShowing: {
type: Boolean
}
},
mounted() {
if (window.kakao && window.kakao.maps) {
this.initMap();
} else {
const script = document.createElement('script');
script.onload = () => kakao.maps.load(this.initMap);
script.src = 'http://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=326e38503f420e1f0088dab1f46dc0c7';
document.head.appendChild(script);
}
},
data() {
return {
map: null,
mapCenter: this.center
}
},
watch: {
isShowing(val) {
if (val) {
this.relayout();
}
},
width(val) {
this.$refs.map.style.width = val + 'px';
this.relayout();
},
height(val) {
this.$refs.map.style.height = val + 'px';
this.relayout();
}
},
methods: {
initMap() {
const container = this.$refs.map;
container.style.width = this.width + 'px';
container.style.height = this.height + 'px';
const options = {
center: new kakao.maps.LatLng(...this.mapCenter)
};
const map = new kakao.maps.Map(container, options);
map.setMapTypeId(kakao.maps.MapTypeId.HYBRID);
kakao.maps.event.addListener(map, 'center_changed', this.onCenterChanged);
this.map = map;
},
relayout() {
kakao.maps.event.removeListener(this.map, 'center_changed', this.onCenterChanged);
this.map.relayout();
const latlng = new kakao.maps.LatLng(...this.mapCenter);
this.map.setCenter(latlng);
kakao.maps.event.addListener(this.map, 'center_changed', this.onCenterChanged);
},
onCenterChanged() {
const center = this.map.getCenter();
this.mapCenter = [center.getLat(), center.getLng()];
}
}
}
</script>
App.vue:
<template>
<div id="app">
<button @click="toggle">{{ showMap ? "hide" : "show" }}</button>
<button @click="changeMapWidth">change map width</button>
<button @click="changeMapHeight">change map height</button>
<KakaoMap
v-show="showMap"
:appkey="appkey"
:center="center"
:width="mapWidth"
:height="mapHeight"
:isShowing="showMap"
></KakaoMap>
</div>
</template>
<script>
import KakaoMap from './components/KakaoMap';
export default {
data() {
return {
showMap: false,
appkey:'xxxxxxxx',
center:[33.450701, 126.570667],
mapWidth: 200,
mapHeight: 300
}
},
components: {
KakaoMap
},
// for test
methods: {
toggle() {
this.showMap = !this.showMap;
},
changeMapWidth() {
this.mapWidth = this.mapWidth > 200 ? 200 : 500;
},
changeMapHeight() {
this.mapHeight = this.mapHeight > 300 ? 300 : 800;
}
}
}
</script>
