kakao.maps.event.addListener(map, 'rightclick', function (mouseEvent) {
// 지도 오른쪽 클릭 이벤트가 발생했는데 선을 그리고있는 상태이면
if (drawingFlag) {
// 마우스무브로 그려진 선은 지도에서 제거합니다
moveLine.setMap(null);
moveLine = null;
var RightClick = mouseEvent.latLng;
// 마우스 클릭으로 그린 선의 좌표 배열을 얻어옵니다
var path = clickLine.getPath();
// 선을 구성하는 좌표의 개수가 2개 이상이면
if (path.length > 1) {
// 마지막 클릭 지점에 대한 거리 정보 커스텀 오버레이를 지웁니다
if (dots[dots.length-1].distance) {
dots[dots.length-1].distance.setMap(null);
dots[dots.length-1].distance = null;
}
var distance = Math.round(clickLine.getLength()), // 선의 총 거리를 계산합니다
content = getTimeHTML(distance,RightClick); // 커스텀오버레이에 추가될 내용입니다
// 그려진 선의 거리정보를 지도에 표시합니다
showDistance(content, path[path.length-1]);
} else {
// 선을 구성하는 좌표의 개수가 1개 이하이면
// 지도에 표시되고 있는 선과 정보들을 지도에서 제거합니다.
deleteClickLine();
deleteCircleDot();
deleteDistnce();
}
// 상태를 false로, 그리지 않고 있는 상태로 변경합니다
drawingFlag = false;
setInfos(null);
}
});
// 마커를 생성하고 지도위에 표시하는 함수입니다
function deleteClickLine() {
if (clickLine) {
clickLine.setMap(null);
clickLine = null;
}
}
// 마우스 드래그로 그려지고 있는 선의 총거리 정보를 표시하거
// 마우스 오른쪽 클릭으로 선 그리가 종료됐을 때 선의 정보를 표시하는 커스텀 오버레이를 생성하고 지도에 표시하는 함수입니다
function showDistance(content, position) {
if (distanceOverlay) { // 커스텀오버레이가 생성된 상태이면
// 커스텀 오버레이의 위치와 표시할 내용을 설정합니다
distanceOverlay.setPosition(position);
distanceOverlay.setContent(content);
} else { // 커스텀 오버레이가 생성되지 않은 상태이면
// 커스텀 오버레이를 생성하고 지도에 표시합니다
distanceOverlay = new kakao.maps.CustomOverlay({
map: map, // 커스텀오버레이를 표시할 지도입니다
content: content, // 커스텀오버레이에 표시할 내용입니다
position: position, // 커스텀오버레이를 표시할 위치입니다.
xAnchor: 0,
yAnchor: 0,
zIndex: 3
});
}
}
// 그려지고 있는 선의 총거리 정보와
// 선 그리가 종료됐을 때 선의 정보를 표시하는 커스텀 오버레이를 삭제하는 함수입니다
function deleteDistnce () {
if (distanceOverlay) {
distanceOverlay.setMap(null);
distanceOverlay = null;
}
}
// 선이 그려지고 있는 상태일 때 지도를 클릭하면 호출하여
// 클릭 지점에 대한 정보 (동그라미와 클릭 지점까지의 총거리)를 표출하는 함수입니다
function displayCircleDot(position, distance) {
// 클릭 지점을 표시할 빨간 동그라미 커스텀오버레이를 생성합니다
var circleOverlay = new kakao.maps.CustomOverlay({
content: '<span class="dot"></span>',
position: position,
zIndex: 1
});
// 지도에 표시합니다
circleOverlay.setMap(map);
if (distance > 0) {
// 클릭한 지점까지의 그려진 선의 총 거리를 표시할 커스텀 오버레이를 생성합니다
var distanceOverlay = new kakao.maps.CustomOverlay({
content: '<div class="dotOverlay">거리 <span class="number">' + distance + '</span>m</div>',
position: position,
yAnchor: 1,
zIndex: 2
});
// 지도에 표시합니다
distanceOverlay.setMap(map);
}
// 배열에 추가합니다
dots.push({circle:circleOverlay, distance: distanceOverlay});
}
// 클릭 지점에 대한 정보 (동그라미와 클릭 지점까지의 총거리)를 지도에서 모두 제거하는 함수입니다
function deleteCircleDot() {
var i;
for ( i = 0; i < dots.length; i++ ){
if (dots[i].circle) {
dots[i].circle.setMap(null);
}
if (dots[i].distance) {
dots[i].distance.setMap(null);
}
}
dots = [];
}
function addLatLng(position){
var latposition = position.getLat();
var lngposition = position.getLng();
var iwContent = '<div style="padding: 10px; width:230px;">위도:'+ latposition +' </li>'+' <li>'+' 경도: '+ lngposition +'</div>';
var iwRemoveable = true;
var infowindow = new kakao.maps.InfoWindow({
map: map, // 인포윈도우가 표시될 지도
position : position,
content : iwContent,
removable : iwRemoveable
});
infowindow.setMap(map);
// 생성된 마커를 배열에 추가합니다
windows.push(infowindow);
}
// 배열에 추가된 마커들을 지도에 표시하거나 삭제하는 함수입니다
function setInfos(map) {
for (var i = 0; i < windows.length; i++) {
windows[i].setMap(map);
}
}
function getTimeHTML(distance,RightClick) {
// 도보의 시속은 평균 4km/h 이고 도보의 분속은 67m/min입니다
var latposition1 = RightClick.getLat();
var lngposition2 = RightClick.getLng();
// 거리와 도보 시간, 자전거 시간을 가지고 HTML Content를 만들어 리턴합니다
var content = '<ul class="dotOverlay distanceInfo">';
content += ' <li>';
content += ' <span class="label">총거리</span><span class="number">' + distance + '</span>m';
content += ' </li>';
content += ' <li>';
content += ' <div style="padding: 10px; width:230px;">위도:'+ latposition1 +' </li>'+' <li>'+' 경도: '+ lngposition2 +'</div>';
content += ' </li>';
content += '</ul>'
return content;
}
위의 Contents 부분의 도보 자전거 부분을 마지막 클릭 위치의 위도 경도로 바꿔서 넣어주고 싶은데 어떻게 해야될까요…ㅜㅜ 계속해서 시도중인데 안됩니다. 도움 부탁드립니다