Laravel
카카오맵 + VUE 연동 방법
짱구를왜말려?
2022. 9. 15. 21:02
반응형
SMALL
# What?
카카오맵을 그냥 app.blade.php에 script 연동하면 안되고, vue에서 mounted할 때 동적으로 script를 태그해야됨
# How?
<template>
<div>
<div id="map"></div>
<div class="button-group">
<button @click="changeSize(0)">Hide</button>
<button @click="changeSize(400)">show</button>
<button @click="displayMarker(markerPositions1)">marker set 1</button>
<button @click="displayMarker(markerPositions2)">marker set 2</button>
<button @click="displayMarker([])">marker set 3 (empty)</button>
<button @click="displayInfoWindow">infowindow</button>
</div>
</div>
</template>
<script>
export default {
name: "KakaoMap",
data() {
return {
markerPositions1: [
[33.452278, 126.567803],
[33.452671, 126.574792],
[33.451744, 126.572441],
],
markerPositions2: [
[37.499590490909185, 127.0263723554437],
[37.499427948430814, 127.02794423197847],
[37.498553760499505, 127.02882598822454],
[37.497625593121384, 127.02935713582038],
[37.49629291770947, 127.02587362608637],
[37.49754540521486, 127.02546694890695],
[37.49646391248451, 127.02675574250912],
],
markers: [],
infowindow: null,
};
},
mounted() {
if (window.kakao && window.kakao.maps) {
this.initMap();
} else {
const script = document.createElement("script");
/* global kakao */
script.onload = () => kakao.maps.load(this.initMap);
script.src =
"//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=915cffed372954b7b44804ed422b9cf0";
document.head.appendChild(script);
}
},
methods: {
initMap() {
const container = document.getElementById("map");
const options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 5,
};
//지도 객체를 등록합니다.
//지도 객체는 반응형 관리 대상이 아니므로 initMap에서 선언합니다.
this.map = new kakao.maps.Map(container, options);
},
changeSize(size) {
const container = document.getElementById("map");
container.style.width = `${size}px`;
container.style.height = `${size}px`;
this.map.relayout();
},
displayMarker(markerPositions) {
if (this.markers.length > 0) {
this.markers.forEach((marker) => marker.setMap(null));
}
const positions = markerPositions.map(
(position) => new kakao.maps.LatLng(...position)
);
if (positions.length > 0) {
this.markers = positions.map(
(position) =>
new kakao.maps.Marker({
map: this.map,
position,
})
);
const bounds = positions.reduce(
(bounds, latlng) => bounds.extend(latlng),
new kakao.maps.LatLngBounds()
);
this.map.setBounds(bounds);
}
},
displayInfoWindow() {
if (this.infowindow && this.infowindow.getMap()) {
//이미 생성한 인포윈도우가 있기 때문에 지도 중심좌표를 인포윈도우 좌표로 이동시킨다.
this.map.setCenter(this.infowindow.getPosition());
return;
}
var iwContent = '<div style="padding:5px;">Hello World!</div>', // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
iwPosition = new kakao.maps.LatLng(33.450701, 126.570667), //인포윈도우 표시 위치입니다
iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다
this.infowindow = new kakao.maps.InfoWindow({
map: this.map, // 인포윈도우가 표시될 지도
position: iwPosition,
content: iwContent,
removable: iwRemoveable,
});
this.map.setCenter(iwPosition);
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#map {
width: 400px;
height: 400px;
}
.button-group {
margin: 10px 0px;
}
button {
margin: 0 3px;
}
</style>
LIST