<p style="text-align:center;">[주소로 위도, 경도 좌표값 얻기]</p>
<input type="text" id="address" value="" size="70">
<input type="button" value="좌표값 검색" onclick="addressChk()">
	<br>
	<br>
<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>

출처 : https://wonpaper.tistory.com/49

'코딩 > 잡다' 카테고리의 다른 글

bootstrap 슬라이드  (0) 2020.09.04
bootstarp tab 코드  (0) 2020.07.07
bootstrap 4.5 자주쓰는 용어  (0) 2020.07.03
  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기