위도 경도 좌표로 다음지도와 네이버지도 링크하는 방법

· 조회수 67

주소로 지도에 연결하는 방법은 많이들 보셨을텐데 위도와 경도 좌표만을 가지고 연결하는 방법은 다소 생소할 겁니다. 
아래 예제와 설명이 좌표를 가지고 손쉽게 네이버 지도와 다음 지도에 링크하는 방법입니다. 

예제로는 위도(lat)값은 37.5811660381이고 경도(lng)값은 127.012068441이며 설명(이름)에 해당하는 값은 '서울특별시 종로구 낙산길 196 우체통'입니다. 
설명(이름)은 생략이 가능하며 다음과 네이버의 위도 경도 표시 순서가 다르니 이점을 주의하시면 되겠습니다. 
참고로 설명(이름)에 쉼표가 들어가 있을 경우(위치 정보 오류)를 대비해 전처리를 해주시는게 좋습니다.


//php 전처리 예제
$title = str_replace(',', ' ', $title );//쉼표(,)를 공백으로
$title = preg_replace('/\s+/', ' ', $title ); // 연속 공백을 한 칸으로
$title = trim($title );//앞뒤 공백 없애기

//자바스크립트 전처리 예제
let title = "서울시청,사무실";
title = title .replace(/,/g, ' ').replace(/\s+/g, ' ').trim();//쉼표(,)를 공백으로, 연속 공백을 한 칸으로
title = encodeURIComponent(title);

/** 다음 https://map.kakao.com/link/map/설명(이름),위도,경도 **/
// https://map.kakao.com/link/map/서울특별시 종로구 낙산길 196,37.5811660381,127.012068441


/** 네이버 https://map.naver.com/p/entry/place?lng=경도&lat=위도&title=설명(이름) **/
// https://map.naver.com/p/entry/place?lng=127.012068441&lat=37.5811660381&title=서울특별시 종로구 낙산길 196


/**자바스크립트(다음)**/
let title = "서울시청,사무실";
title = title .replace(/,/g, ' ').replace(/\s+/g, ' ').trim();//쉼표 → 공백, 연속 공백 1개로 줄이기
title = encodeURIComponent(title);

let lat = 37.5665;
let lng = 126.9780;

let kakaoUrl = `https://map.kakao.com/link/map/${title},${lat},${lng}`;
console.log(kakaoUrl);

"타인을 감동시키려면 먼저 자기가 감동하지 않으면 안된다. 그렇지 못하면 제아무리 우수한 작품일지라도, 생명이 길지 못하다. - 밀레 (Jean Francois Millet, 1814~1875, 프랑스 화가)"

- 작품, 감동 -

북마크목록