Notice
Recent Posts
Recent Comments
Tags more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

[카카오지도] javascript 주소명으로 위도경도 좌표값 얻기 본문

javascript

[카카오지도] javascript 주소명으로 위도경도 좌표값 얻기

http://portfolio.wonpaper.net 2018. 11. 27. 01:10

작업전에 먼저 다음지도 API키를 먼저 발급받아 두도록 하자~

 

기존에 다음지도를 통해서, 주소 검색하면 위도경도 값을 볼수 있었는데, 현재는 조회가 직관적으로 나오지 않는다.

 

그래서 다음지도 API 소스를 바탕으로 별도의 파일을 만들어 보았다.

 



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>다음지도 - 주소로 위도/경도 좌표값 얻기</title>
</head>
<body>
<p style="text-align:center;">[주소로 위도, 경도 좌표값 얻기]</p>
<input type="text" id="address" value="" size="70"> <input type="button" value="좌표값 검색" onclick="addressChk()">
<div id="map" style="width:100%;height:450px;"></div>
<div id="coordXY"></div>
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=다음지도API키값&libraries=services"></script>
<script>
var address      = document.getElementById("address");
var mapContainer = document.getElementById("map");
var coordXY   = document.getElementById("coordXY");
var mapOption;
var map;
var x,y          = "";
if (address.value=="") {
 mapOption = {
  center: new daum.maps.LatLng(33.450701, 126.570667), // 임의의 지도 중심좌표 , 제주도 다음본사로 잡아봤다.
        level: 4            // 지도의 확대 레벨
 };
}
// 지도 생성
map = new daum.maps.Map(mapContainer, mapOption);

function addressChk() {
 var gap = address.value; // 주소검색어
 if (gap=="") {
  alert("주소 검색어를 입력해 주십시오.");
  address.focus();
  return;
 }
 
 // 주소-좌표 변환 객체를 생성
 var geocoder = new daum.maps.services.Geocoder();


 // 주소로 좌표를 검색
 geocoder.addressSearch(gap, function(result, status) {
  
  // 정상적으로 검색이 완료됐으면,
  if (status == daum.maps.services.Status.OK) {
   
   var coords = new daum.maps.LatLng(result[0].y, result[0].x);
   y = result[0].x;
   x = result[0].y;


   // 결과값으로 받은 위치를 마커로 표시합니다.
   var marker = new daum.maps.Marker({
    map: map,
    position: coords
   });


   // 인포윈도우로 장소에 대한 설명표시
   var infowindow = new daum.maps.InfoWindow({
    content: '<div style="width:150px;text-align:center;padding:5px 0;">좌표위치</div>'
   });
   infowindow.open(map,marker);
   
   // 지도 중심을 이동
   map.setCenter(coords);
   coordXY.innerHTML = "<br>X좌표 : " + x + "<br><br>Y좌표 : " + y;
  }
 });
}

</script>
</body>
</html>

 

[실행 결과 화면]

 

'javascript' 카테고리의 다른 글

체크박스 여러개중에 체크한것만 삭제하기  (0) 2018.12.21
현재위치에서 반경2km 내 업체들 거리, 도보/자전거 이동거리 구하기  (0) 2018.11.30
JSON.parse , JSON.stringify  (0) 2018.11.26
javascript 상에서 안드로이드나 혹은 IOS로 분개시키기  (0) 2018.11.26
공백제거  (0) 2018.11.25
'javascript' Related Articles more
Comments