Light Blue Pointer
본문 바로가기
TIL(Develop)

네이버 지도 API로 선택한 위치의 좌표 추출하기

by 개발바닥곰발바닥!!! 2024. 3. 25.

1. head에 네이버 지도를 달아준다

<script
      src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId={본인의 클라이언트 아이디}&submodules=geocoder"
      type="text/javascript"></script>

2. 지도를 넣고싶은 자리에 코드를 넣어준다

      <div id="map" padding="10px" style="width:1000px; height:450px;"></div>

3. 자바스크립트 코드를 작성한다

<script>

  var lat = 37.3614483;
  var lng = 127.1114883;
  var latlng;
  
  function drawMap(lat, lng) {
    map = new naver.maps.Map("map", {
      center: new naver.maps.LatLng(lat, lng),
      zoom: 16
    }),
        infoWindow = null;
  }

  var map = new naver.maps.Map("map", {
        center: new naver.maps.LatLng(lat, lng),
        zoom: 16
      }),
      infoWindow = null;

  function initGeocoder() {
    latlng = map.getCenter();

    infoWindow = new naver.maps.InfoWindow({
      content: ''
    });

    map.addListener('click', function (e) {
      latlng = e.coord;

      infoWindow.setContent([
        '<div style="padding:10px;width:10px;line-height:20px;">',
        '<div> ' + ' ' + '</div>',
        '</div>'
      ].join(''));
      infoWindow.open(map, latlng);
    });
  }

  naver.maps.onJSContentLoaded = initGeocoder;
  
  </script>

 

나는 알 수 없는 이유로 naver.maps.Event.addListener 가 활성화되지 않아서

naver.maps.만으로 쓸 수 있는 infowindow를 응용해서 사용했다

 

지도를 클릭하면 인포윈도우가 뜨고 그 좌표의 경도와 위도가 전역변수인 latlng에 저장된다

    map.addListener('click', function (e) {
      latlng = e.coord;

 

 

'TIL(Develop)' 카테고리의 다른 글

Spring Framework 란?  (0) 2024.05.06
네이버 지도 API에 좌표로 마커 표시하기  (0) 2024.03.25
네이버 지도 API 사용하기  (0) 2024.03.25
클라이언트에서 데이터를 받아오는 방법  (2) 2023.12.06
인증과 인가  (2) 2023.11.20