안녕하세요
제목과 같이 마커를 표시한 후에 아래와 같이 정상 도시됨을 확인하였습니다.
다만 지도를 다른곳을 보거나 확대/축소하다보면 아래와 같이 될 경우가 생깁니다.
선의 끝지점이 마커의 중심인데 이렇게 어긋나버립니다.
마커는 아주 미세한 소수점 자리에서 조금씩 이동할 뿐 지도에 표시된 형태와 같이 크게 벗어나질 않는 상황인데도 저렇게 표시됩니다.
물론 지도를 아주 다른곳으로 이동후 다시 가보면 정상적으로 도시되기도 하고 그렇지 않기도 합니다.
혹시 제가 알아야 할 지점이 있을련지요…
화살표 마커의 생성/업데이트/회전
그리고 선의 생성 및 업데이트 부분은 아래와 같이 구현되었습니다.
function CreateMarker(id, lat, lng, angle) {
// 마커가 표시될 위치입니다
var markerPosition = new kakao.maps.LatLng(lat, lng, angle);
var Content = document.createElement('div');
Content.id = id + 'content';
Content.classList.add('uam');
Content.classList.add('circle');
Content.style.transform = 'rotate(' + angle + 'deg)';
// 마커를 생성합니다
var marker = new kakao.maps.CustomOverlay({
position: markerPosition,
content: Content
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
DictMarkers[id] = marker;
}
function getAngle(center, target) {
var dx = target.x - center.x;
var dy = center.y - target.y;
var deg = Math.atan2(dy, dx) * 180 / Math.PI;
return (-deg + 450) % 360 | 0;
}
function MoveMarker(id, lat, lng) {
//외부에서 업데이트할 id와 위치를 매개변수로 업데이트
DictMarkers[id].setPosition(new kakao.maps.LatLng(lat, lng));
//마커를 지도 상에 업데이트 함
DictMarkers[id].setMap(map);
}
function RotateMarker(id, angle) {
//마커의 컨텐츠 찾기
var target = document.getElementById(id + 'content');
//마커 회전
target.style.transform = 'rotate(' + angle + 'deg)';
}
var DicPolylineMarker = {};
var DicPolylinePath = {};
function CreateLine(id, lat, lng) {
var linePath = [
new kakao.maps.LatLng(lat, lng)
];
// 지도에 표시할 선을 생성합니다
var polyline = new kakao.maps.Polyline({
path: linePath, // 선을 구성하는 좌표배열 입니다
strokeWeight: 2, // 선의 두께 입니다
strokeColor: '#FFAE00', // 선의 색깔입니다
strokeOpacity: 0.7, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
strokeStyle: 'solid' // 선의 스타일입니다
});
// 지도에 선을 표시합니다
polyline.setMap(map);
DicPolylineMarker[id] = polyline;
DicPolylinePath[id] = linePath;
}
function AddLinePath(id, lat, lng) {
if (DicPolylinePath[id].length > 100) {
DicPolylinePath[id].splice(0, 1);
}
DicPolylinePath[id].push(new kakao.maps.LatLng(lat, lng));
// 지도에 표시할 선을 생성합니다
var polyline = new kakao.maps.Polyline({
path: DicPolylinePath[id], // 선을 구성하는 좌표배열 입니다
strokeWeight: 2, // 선의 두께 입니다
strokeColor: '#00FFFA', // 선의 색깔입니다
strokeOpacity: 0.7, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
strokeStyle: 'solid' // 선의 스타일입니다
});
DicPolylineMarker[id].setMap(null);
// 지도에 선을 표시합니다
polyline.setMap(map);
DicPolylineMarker[id] = polyline;
}
바쁘실텐데 확인 부탁드려봅니다.
좋은 하루되세요^^
