Vue.js를 사용해서 카카오맵 API를 사용하고 있습니다.
마커를 클릭했을때 다음과 같이 카드나 시트 같은게 나오게 하려고 하는데요.
Vuex로 마커를 클릭하는 액션으로 카드나 시트를 토글하려고 합니다.
내부 카카오 API에서 접근을 못하는거 같은데
접근할수 있는 방법이 있거나 아니면
그냥 카카오 커스텀오버레이 같은걸 사용해서 해야하나요?
구글맵처럼 마커를 클릭하면 왼쪽에 패널을 추가하게 하고싶습니다.
https://www.google.co.kr/maps/place/서울역서부/@37.5536972,126.9669926,16z/data=!4m5!3m4!1s0x0:0x39bc6fe988d160ae!8m2!3d37.5563836!4d126.9692785?hl=ko
export default {
name: "Monitoring",
mounted() {
window.kakao && window.kakao.maps
? this.initMap()
: this.addKakaoMapScript();
},
components: {
},
data: () => ({
}),
methods : {
initMap() {
var container = document.getElementById('map'); // 지도를 표실할 div
var options = {
center: new kakao.maps.LatLng(37.5500792286216, 127.0506923683668), // 지도의 중심좌표
level: 3 };
var map = new kakao.maps.Map(container, options); // 지도를 생성
// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
// 마커 이미지 설정
var imageSrc = require('@/assets/manhole.png'), // 마커이미지의 주소
imageSize = new kakao.maps.Size(32, 32), // 마커이미지의 크기
imageOption = {offset: new kakao.maps.Point(30, 30)}; // 마커이미지의 옵션. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption),
markerPosition = new kakao.maps.LatLng(37.5500792286216, 127.0506923683668);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: markerPosition,
image: markerImage,
clickable:true
});
// 마커가 지도 위에 표시되도록 설정
marker.setMap(map);
// 마커에 커서가 오버됐을 때 마커 위에 표시할 인포윈도우를 생성합니다
var iwContent = '<div style="padding:5px;">Hello World!</div>'; // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content : iwContent
});
// 마커에 마우스오버 이벤트를 등록합니다
kakao.maps.event.addListener(marker, 'mouseover', function() {
// 마커에 마우스오버 이벤트가 발생하면 인포윈도우를 마커위에 표시합니다
infowindow.open(map, marker);
});
// 마커에 마우스아웃 이벤트를 등록합니다
kakao.maps.event.addListener(marker, 'mouseout', function() {
// 마커에 마우스아웃 이벤트가 발생하면 인포윈도우를 제거합니다
infowindow.close();
});
// 마커에 클릭이벤트를 등록합니다
kakao.maps.event.addListener(marker, 'click', function() {
// click 했을때 이벤트
this.$store.dispatch('toggleMarkerPanel', true); //vuex로 마커클릭상태를 변경
});
},
addKakaoMapScript() {
const script = document.createElement('script');
/* global kakao */
script.onload = () => kakao.maps.load(this.initMap);
script.src = 'http://dapi.kakao.com/v2/maps/sdk.js?
autoload=false&appkey=7c95ac500df21034b174420a877eeaa9';
document.head.appendChild(script); }
}
};
</script>