vue.js 에서 카카오맵을 이용해서 개발하고 있습니다.
카카오맵을 이용하여, DB의 위도,경도,반경(circle radius)을 불러와서 맵에 뿌려주고
맵 드래그시 중심좌표로부터 반경도 같이 움직이고(dragEnd로 구현),
드래그 된 중심좌표를 data에 선언한 변수(latitude ,longitude )에 담아서,
silder를 통한 반경을 조절하고 싶은데,
중심좌표가 변수에 바인딩이 되지 않습니다.
바인딩에 대한 글이 있지만, 해결 답변이 없어서 다시 올리게 됩니다!
감사합니다!
data: () => {
return {
latitude : 37.521833267590274,
longitude : 126.9242793111798,
}
},
mounted() {
window.kakao && window.kakao.maps ? this.initMap() : this.addKakaoMapScript();
},
initMap : function() {
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(this.latitude, this.longitude), // 지도의 중심좌표
level: 3, // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption);
this.map = map;
// 지도를 클릭한 위치에 표출할 마커입니다
var marker = new kakao.maps.Marker({
// 지도 중심좌표에 마커를 생성합니다
position: map.getCenter()
});
// 지도에 마커를 표시합니다
marker.setMap(this.map);
// 주소-좌표 변환 객체를 생성합니다
this.geocoder = new kakao.maps.services.Geocoder();
//반경만들기
var circle = new kakao.maps.Circle({
map: this.map,
center : new kakao.maps.LatLng(this.latitude, this.longitude),
radius: this.distance,
strokeWeight: 1,
strokeColor: '#00a0e9',
strokeOpacity: 0.1,
strokeStyle: 'solid',
fillColor: '#00a0e9',
fillOpacity: 0.2
});
circle.setMap(this.map);
}
kakao.maps.event.addListener(this.map, 'click', function(mouseEvent) {
// 클릭한 위도, 경도 정보를 가져옵니다
var latlng = mouseEvent.latLng;
this.latitude = latlng.getLat() //바인딩되지 않음.
this.longitude = latlng.getLng()
console.log(this.latitude, this.longitude)
//원 중심좌표 이동
if(circledis == true && this.distance != 0){
var position = new kakao.maps.LatLng(this.latitude, this.longitude);
circle.setPosition(position);
}
// 마커 위치를 클릭한 위치로 옮깁니다
marker.setPosition(latlng);
});
}