오늘 할 일

1. 지도 api에서 좌표값 가져오는거 해봄!

2. 주문완료기능 개발

1. 지도 api에서 좌표값 가져오기

지도 api를 해봄

https://apis.map.kakao.com/

동 별로 조회하는것도 하기로 했는데 그건 네이버지도만 있는것 같기도 해서 더 찾아봄

https://www.ncloud.com/product/applicationService/maps

네이버 지도 기능)

Places

지번, 도로명을 질의어로 주소의 좌표값과 세부 정보 제공, 네이버 지도에서 좌표를 주소 정보로 변환하는 서비스 가능

Geocoding 입력한 주소를 검색하여 좌표를 포함한 상세 정보 제공

Reverse Geocoding 좌표를 검색하여 법정동, 행정동, 지번 주소, 도로명 주소 등 주소 정보 제공

https://navermaps.github.io/maps.js.ncp/docs/tutorial-digest.example.html

오 카카오지도는 docs가 구글 검색하자마자 나와서 그거 쓰려했는데

네이버지도가 github에 예제까지 다 모아놔서

네이버 지도도 좀 끌림

걍 네이버로 하기로 함!

왜냐면 네이버 가고싶으니까 ㅎㅎ…

행정구역 GeoJSON 데이터 레이어 표시하기 → 저걸로 하면 동 검색도 될거같기도…

해서 네이버 지도 쓰기로 함!!

마커 표시하기도 있고 네이버 지도 API Github 노다지인듯!!

1. 클라이언트 아이디 발급

NAVER 지도 API v3을 사용하려면 클라이언트 아이디를 이용해서 인증해야 합니다.

우선

네이버 클라우드 플랫폼에 가입함

https://auth.ncloud.com/join

Map api에 등록함

https://console.ncloud.com/dashboard

네이버 클라우드 플랫폼 콘솔

https://console.ncloud.com/naver-service/application

여기 가서 Application을 등록해봄

다 필요할까..?

Maps각 서비스 용도에 맞게 정적 지도, 동적 지도, 벡터 지도 등을 선택할 수 있으며 사용자에게 실제 장소의 모습을 보여줄 수 있음 Web Dynamic Map 패닝(panning), 줌 인(zoom in), 줌 아웃(zoom out) 등이 가능한 동적 지도를 제공

	Mobile Dynamic Map	네이버 지도 애플리케이션에서 사용하는 벡터 지도를 제공
	Static Map	요청된 URL 매개 변수를 기반으로 웹 페이지에 표시할 수 있는 이미지의 지도를 제공
Directions네이버 지도가 보유한 다양한 데이터와 실시간 교통 정보를 기반으로 사용자에게 출발지에서 목적지까지 가는 최적의 경로를 제공	Directions	사용자가 지정한 출발지와 목적지 정보에 따라 경로와 관련된 정보 제공(자동차 길찾기 외 기능은 추후 제공 예정)
Places지번, 도로명을 질의어로 주소의 좌표값과 세부 정보 제공, 네이버 지도에서 좌표를 주소 정보로 변환하는 서비스 가능	Geocoding	입력한 주소를 검색하여 좌표를 포함한 상세 정보 제공
	Reverse Geocoding	좌표를 검색하여 법정동, 행정동, 지번 주소, 도로명 주소 등 주소 정보 제공

일단 Directions는 필요없을듯

제일 필요한건 geocoding인듯함

상품명 최대 이용 한도(Client ID당 월간 이용 가능한 횟수)

Mobile Dynamic Map	100,000,000건
Web Dynamic Map	10,000,000건
Static Map	3,000,000건
Geocoding	3,000,000건
Reverse Geocoding	3,000,000건

저걸.. 넘진 않겠지

일단은 이렇게만 진행해봄

일단 url에는 이걸 넣어봄

http://localhost.:8080

Application 등록 후 앱 하단의 인증 정보를 클릭함

ClientID

ClientSecret

이걸로 이제 RestTemplate 설정같은거 해주면 될듯

일단 html에 네이버 지도를 박스를 만들어서 달아봄

지도 기본 예제

https://github.com/navermaps/maps.js.ncp

완전 좋음 예시코드가 다 나와있음!!

map.html 만들어서 해봄

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>간단한 지도 표시하기</title>
    <script src="../../docs/js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="../../docs/js/examples-base.js"></script>
    <script type="text/javascript" src="../../docs/js/highlight.min.js"></script>
    <!-- ncpClientId는 등록 환경에 따라 일반(ncpClientId), 공공(govClientId), 금융(finClientId)으로 나뉩니다. 사용하는 환경에 따라 키 이름을 변경하여 사용하세요. 참고: clientId(네이버 개발자 센터)는 지원 종료 -->
    <script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=83bfuniegk"></script>
    <link rel="stylesheet" type="text/css" href="../../docs/css/examples-base.css" />
</head>
<body>

<!-- @category Map -->

<div id="wrap" class="section">
    <h2>간단한 지도 표시하기</h2>
    <p>지도를 생성하는 가장 기본적인 예제입니다. 지도 옵션을 설정하지 않으면 다음과 같이 서울 시청을 중심으로 하는 지도가 생성됩니다.</p>
    <div id="map" style="width:100%;height:600px;"></div>
    <code id="snippet" class="snippet"></code>
</div>
<script id="code">
//지도를 삽입할 HTML 요소 또는 HTML 요소의 id를 지정합니다.
var mapDiv = document.getElementById('map'); // 'map'으로 선언해도 동일

//옵션 없이 지도 객체를 생성하면 서울 시청을 중심으로 하는 16 레벨의 지도가 생성됩니다.
var map = new naver.maps.Map(mapDiv);
</script>

</body>
</html>

현재 위치 지정하기/ 원하는 위치 지정하기를 해봄!

https://navermaps.github.io/maps.js.ncp/docs/tutorial-6-map-geolocation.example.html

오 저런것도 되는구나

Geolocation HTML5 API를 통해 얻은 좌표로 지도를 이동하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다.

navigator.geolocation 은 Chrome 50 버젼 이후로 HTTP 환경에서 사용이 Deprecate 되어 HTTPS 환경에서만 사용 가능 합니다. http://localhost 에서는 사용이 가능하며, 테스트 목적으로, Chrome 의 바로가기를 만들어서 아래와 같이 설정하면 접속은 가능합니다. chrome.exe --unsafely-treat-insecure-origin-as-secure="http://example.com"

→ 오…. 우리 프로젝트 아직 http라서 못 쓸듯

→ 🚀 https로 바꾸는 도전도 해보고싶다!!!

🚩문제 : 동적인 클릭이 안 됨, 등록된 모든 이벤트 예제의 naver.maps.Event.addListener가 안 먹힘

저것만 됐으면 진짜 금방 끝났을 문제의 대장정의 시작...

네이버 깃허브 이잡듯이 뒤지면서 좌표 뽑을 수 있을 거 같은거 다 해봄

이벤트 기본 예제

https://navermaps.github.io/maps.js.ncp/docs/tutorial-1-event-simple.example.html

지도의 클릭 이벤트를 이용하는 예제입니다. 클릭 위치에 마커를 표시하고, 마우스 오른쪽 버튼을 클릭하면 정보 레이어를 표시합니다.

이 예제는 jQuery 구문을 포함하고 있습니다.

var map = new naver.maps.Map('map', {
        zoom: 5,
        center: new naver.maps.LatLng(37.3614483, 127.1114883)
    });

    var markerList = [];
    var menuLayer = $('<div style="position:absolute;z-index:10000;background-color:#fff;border:solid 1px #333;padding:10px;display:none;"></div>');

    map.getPanes().floatPane.appendChild(menuLayer[0]);


    naver.maps.Event.addListener(map, 'click', function(e) {
        var marker = new naver.maps.Marker({
            position: e.coord,
            map: map
        });

        markerList.push(marker);
    });

    naver.maps.Event.addListener(map, 'keydown', function(e) {
        var keyboardEvent = e.keyboardEvent,
            keyCode = keyboardEvent.keyCode || keyboardEvent.which;

        var ESC = 27;

        if (keyCode === ESC) {
            keyboardEvent.preventDefault();

            for (var i=0, ii=markerList.length; i<ii; i++) {
                markerList[i].setMap(null);
            }

            markerList = [];

            menuLayer.hide();
        }
    });

    naver.maps.Event.addListener(map, 'mousedown', function(e) {
        menuLayer.hide();
    });

    naver.maps.Event.addListener(map, 'rightclick', function(e) {
        var coordHtml =
            'Coord: '+ '(우 클릭 지점 위/경도 좌표)' + '<br />' +
            'Point: ' + e.point + '<br />' +
            'Offset: ' + e.offset;

        menuLayer.show().css({
            left: e.offset.x,
            top: e.offset.y
        }).html(coordHtml);

        console.log('Coord: ' + e.coord.toString());
    });

동적 지도만 생기고 클릭이 안 됨…

타임리프라서 그런가요

event simple html 찾아봄

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>지도 이벤트</title>
  <script src="../docs/js/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="../docs/js/examples-base.js"></script>
  <script type="text/javascript" src="../docs/js/highlight.min.js"></script>
  <!-- ncpClientId는 등록 환경에 따라 일반(ncpClientId), 공공(govClientId), 금융(finClientId)으로 나뉩니다. 사용하는 환경에 따라 키 이름을 변경하여 사용하세요. 참고: clientId(네이버 개발자 센터)는 지원 종료 -->
  <script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=83bfuniegk"></script>
</head>
<body>

<!-- @category Event -->

<div id="wrap" class="section">
  <h2>지도 이벤트</h2>
  <p>지도의 클릭 이벤트를 이용하는 예제입니다. 클릭 위치에 마커를 표시하고, 마우스 오른쪽 버튼을 클릭하면 정보 레이어를 표시합니다. </p>
  <p>이 예제는 jQuery 구문을 포함하고 있습니다.</p>
  <div id="map" style="width:100%;height:600px;"></div>
  <code id="snippet" class="snippet"></code>
</div>
<script id="code">
  var map = new naver.maps.Map('map', {
    zoom: 5,
    center: new naver.maps.LatLng(37.3614483, 127.1114883)
  });

  var markerList = [];
  var menuLayer = $('<div style="position:absolute;z-index:10000;background-color:#fff;border:solid 1px #333;padding:10px;display:none;"></div>');

  map.getPanes().floatPane.appendChild(menuLayer[0]);


  naver.maps.Event.addListener(map, 'click', function(e) {
    var marker = new naver.maps.Marker({
      position: e.coord,
      map: map
    });

    markerList.push(marker);
  });

  naver.maps.Event.addListener(map, 'keydown', function(e) {
    var keyboardEvent = e.keyboardEvent,
        keyCode = keyboardEvent.keyCode || keyboardEvent.which;

    var ESC = 27;

    if (keyCode === ESC) {
      keyboardEvent.preventDefault();

      for (var i=0, ii=markerList.length; i<ii; i++) {
        markerList[i].setMap(null);
      }

      markerList = [];

      menuLayer.hide();
    }
  });

  naver.maps.Event.addListener(map, 'mousedown', function(e) {
    menuLayer.hide();
  });

  naver.maps.Event.addListener(map, 'rightclick', function(e) {
    var coordHtml =
        'Coord: '+ '(우 클릭 지점 위/경도 좌표)' + '<br />' +
        'Point: ' + e.point + '<br />' +
        'Offset: ' + e.offset;

    menuLayer.show().css({
      left: e.offset.x,
      top: e.offset.y
    }).html(coordHtml);

    console.log('Coord: ' + e.coord.toString());
  });

</script>


</body>
</html>

클릭이 안 먹힘!!

일단 경도랑 위도 저장할 동적 텍스트 만들

클릭 ajax를 내가 만들어봄

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>지도 이벤트</title>
  <script src="../docs/js/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="../docs/js/examples-base.js"></script>
  <script type="text/javascript" src="../docs/js/highlight.min.js"></script>
  <!-- ncpClientId는 등록 환경에 따라 일반(ncpClientId), 공공(govClientId), 금융(finClientId)으로 나뉩니다. 사용하는 환경에 따라 키 이름을 변경하여 사용하세요. 참고: clientId(네이버 개발자 센터)는 지원 종료 -->
  <script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=83bfuniegk"></script>
</head>
<body>

<!-- @category Event -->

<div id="wrap" class="section">
  <h2>지도 이벤트</h2>
  <p>지도의 클릭 이벤트를 이용하는 예제입니다. 클릭 위치에 마커를 표시하고, 마우스 오른쪽 버튼을 클릭하면 정보 레이어를 표시합니다. </p>
  <p>이 예제는 jQuery 구문을 포함하고 있습니다.</p>
  <div id="map" style="width:100%;height:600px;"></div>
  <code id="snippet" class="snippet"></code>
</div>
<script id="code">
  var map = new naver.maps.Map('map', {
    zoom: 5,
    center: new naver.maps.LatLng(37.3614483, 127.1114883)
  });

  var markerList = [];
  var menuLayer = $('<div style="position:absolute;z-index:10000;background-color:#fff;border:solid 1px #333;padding:10px;display:none;"></div>');

  map.getPanes().floatPane.appendChild(menuLayer[0]);


  naver.maps.Event.addListener(map, 'click', function(e) {
    var marker = new naver.maps.Marker({
      position: e.coord,
      map: map
    });

    markerList.push(marker);
  });

  naver.maps.Event.addListener(map, 'keydown', function(e) {
    var keyboardEvent = e.keyboardEvent,
        keyCode = keyboardEvent.keyCode || keyboardEvent.which;

    var ESC = 27;

    if (keyCode === ESC) {
      keyboardEvent.preventDefault();

      for (var i=0, ii=markerList.length; i<ii; i++) {
        markerList[i].setMap(null);
      }

      markerList = [];

      menuLayer.hide();
    }
  });

  naver.maps.Event.addListener(map, 'mousedown', function(e) {
    menuLayer.hide();
  });

  naver.maps.Event.addListener(map, 'rightclick', function(e) {
    var coordHtml =
        'Coord: '+ '(우 클릭 지점 위/경도 좌표)' + '<br />' +
        'Point: ' + e.point + '<br />' +
        'Offset: ' + e.offset;

    menuLayer.show().css({
      left: e.offset.x,
      top: e.offset.y
    }).html(coordHtml);

    console.log('Coord: ' + e.coord.toString());
  });

</script>


</body>
</html>

타임리프 클릭이벤드는 뭐지

아 근데 파일만 열면 마커 달리고 클릭이벤트가 되는데 인텔리제이 스프링 프로젝트로 실행해서 불러오면 안됨

thymeleaf 클릭 이벤트

th:onclick

<html>

→

<html xmlns:th="http://www.thymeleaf.org">

Jan 5, 2023 — JQuery를 통해 커스텀데이터를 지정할 수 있듯이, 타임리프의 th:attr을 사용하여 데이터를 지정할 수 있습니다. ... click 함수 자바스크립트의 click 함수

→ postId 달 때 좋을듯

인증이 안 된다고 함

네이버 Q&A 에 다른사람이 똑같은 문제 올려둔거 답변 보니

애플리케이션 설정상 ClientID값과 서비스 URL 값을 확인해주세요. 라고 함

https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Getting-Started.html

인증 실패 확인

전역 함수를 사용하면 클라이언트 아이디 인증 실패를 확인할 수 있습니다. 아래 함수가 정의되어 있을 경우 Open API 인증 실패 시 함수가 호출됩니다.

window.navermap_authFailure =function () {
    // 인증 실패 시 처리 코드 작성
    // ...
}

롯데월드에 좌표찍기 완료

→이걸로 글 상세페이지에 위치 좌표 찍기 할 수 있을듯…!!

  <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>네이버지도 스틱코드</title>
  <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=sa2ld1fdvv"></script>
</head>
<body>
<div id="map" style="width:100%; height:800px;"></div>

<script>

  var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.5112, 127.0981), // 잠실 롯데월드를 중심으로 하는 지도
    zoom: 15
  });

  var marker = new naver.maps.Marker({
    position: new naver.maps.LatLng(37.5112, 127.0981),
    map: map
  });

</script>

</body>
</html>

이제 클릭이벤트로 좌표값만 알아내면 돼…

아님 정 중앙에다가 점 만들고 그거를…

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>네이버지도 스틱코드</title>
  <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=sa2ld1fdvv"></script>
</head>
<body>
<div id="map" style="width:100%; height:800px;"></div>
<script>
  var markerList = [];
  var menuLayer = $('<div style="position:absolute;z-index:10000;background-color:#fff;border:solid 1px #333;padding:10px;display:none;"></div>');

  map.getPanes().floatPane.appendChild(menuLayer[0]);


  naver.maps.Event.addListener(map, 'click', function(e) {
    var marker = new naver.maps.Marker({
      position: e.coord,
      map: map
    });

    markerList.push(marker);
  });

  naver.maps.Event.addListener(map, 'keydown', function(e) {
    var keyboardEvent = e.keyboardEvent,
        keyCode = keyboardEvent.keyCode || keyboardEvent.which;

    var ESC = 27;

    if (keyCode === ESC) {
      keyboardEvent.preventDefault();

      for (var i=0, ii=markerList.length; i<ii; i++) {
        markerList[i].setMap(null);
      }

      markerList = [];

      menuLayer.hide();
    }
  });

  naver.maps.Event.addListener(map, 'mousedown', function(e) {
    menuLayer.hide();
  });

  naver.maps.Event.addListener(map, 'rightclick', function(e) {
    var coordHtml =
        'Coord: '+ '(우 클릭 지점 위/경도 좌표)' + '<br />' +
        'Point: ' + e.point + '<br />' +
        'Offset: ' + e.offset;

    menuLayer.show().css({
      left: e.offset.x,
      top: e.offset.y
    }).html(coordHtml);

    console.log('Coord: ' + e.coord.toString());
  });

</script>

</body>
</html>

이렇게 한 번 해봄!

화면이 백지가 됨

내가 필요한것만 남겨봄

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>네이버지도 스틱코드</title>
  <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=sa2ld1fdvv"></script>
</head>
<body>
<div id="map" style="width:100%; height:800px;"></div>
<script>


  naver.maps.Event.addListener(map, 'rightclick', function(e) {
    var coordHtml =
        'Coord: '+ '(우 클릭 지점 위/경도 좌표)' + '<br />' +
        'Point: ' + e.point + '<br />' +
        'Offset: ' + e.offset;

    menuLayer.show().css({
      left: e.offset.x,
      top: e.offset.y
    }).html(coordHtml);

    console.log('Coord: ' + e.coord.toString());
  });

</script>

</body>
</html>

네이버 이벤트 리스너

https://navermaps.github.io/maps.js.ncp/docs/tutorial-DOM-Event.html

NAVER Maps API v3

NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다.

navermaps.github.io

읽어봄

KVO 이벤트

지도 객체의 KVO 이벤트를 이용하는 예제입니다. 지도의 줌 레벨을 변경하면 변경된 줌 레벨을 정보 창에 표시합니다. 이 예제는 jQuery 구문을 포함하고 있습니다.

https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-event-kvo.example.html

중간좌표가 나오긴 함!

var map = new naver.maps.Map('map', {
        zoom: 5,
        center: new naver.maps.LatLng(37.3614483, 127.1114883),
        padding: { top: 100 },
        zoomControl:true,
        zoomControlOptions: {
            style: naver.maps.ZoomControlStyle.SMALL
        }
    });

    var contentEl = $('<div class="iw_inner" style="width:350px;position:absolute;top:0;right:0;z-index:1000;background-color:#fff;border:solid 1px #333;">'
        + '<h3>Map States</h3>'
        + '<p style="font-size:14px;">zoom : <em class="zoom">'+ map.getZoom() +'</em></p>'
        + '<p style="font-size:14px;">centerPoint : <em class="center">'+ map.getCenterPoint() +'</em></p>'
        + '</div>');

    contentEl.appendTo(map.getElement());

    naver.maps.Event.addListener(map, 'zoom_changed', function(zoom) {
        contentEl.find('.zoom').text(zoom);
    });

    naver.maps.Event.addListener(map, 'bounds_changed', function(bounds) {
        contentEl.find('.center').text(map.getCenterPoint());
        console.log('Center: ' + map.getCenter().toString() + ', Bounds: ' + bounds.toString());
    });

naver.maps.Event.addListener 안먹히는데 나는 ㅋㅋ

https://navermaps.github.io/maps.js.ncp/docs/tutorial-1-geocoder-transcoord.example.html

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

functioninitGeocoder() {
var latlng = map.getCenter();
var utmk = naver.maps.TransCoord.fromLatLngToUTMK(latlng); // 위/경도 -> UTMK
var tm128 = naver.maps.TransCoord.fromUTMKToTM128(utmk);   // UTMK -> TM128
var naverCoord = naver.maps.TransCoord.fromTM128ToNaver(tm128); // TM128 -> NAVER

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

    map.addListener('click',function(e) {
var latlng = e.coord,
            utmk = naver.maps.TransCoord.fromLatLngToUTMK(latlng),
            tm128 = naver.maps.TransCoord.fromUTMKToTM128(utmk),
            naverCoord = naver.maps.TransCoord.fromTM128ToNaver(tm128);

        utmk.x = parseFloat(utmk.x.toFixed(1));
        utmk.y = parseFloat(utmk.y.toFixed(1));

        infoWindow.setContent([
            '<div style="padding:10px;width:380px;font-size:14px;line-height:20px;">',
            '<strong>LatLng</strong> : '+ '좌 클릭 지점 위/경도 좌표' +'<br />',
            '<strong>UTMK</strong> : '+ '위/경도 좌표를 UTMK 좌표로 변환한 값' +'<br />',
            '<strong>TM128</strong> : '+ '변환된 UTMK 좌표를 TM128 좌표로 변환한 값' +'<br />',
            '<strong>NAVER</strong> : '+ '변환된 TM128 좌표를 NAVER 좌표로 변환한 값' +'<br />',
            '</div>'
        ].join(''));

        infoWindow.open(map, latlng);
        console.log('LatLng: ' + latlng.toString());
        console.log('UTMK: ' + utmk.toString());
        console.log('TM128: ' + tm128.toString());
        console.log('NAVER: ' + naverCoord.toString());
    });
}

naver.maps.onJSContentLoaded = initGeocoder;

이거랑 합쳐서 쓰면 뭔가 될거같음!!!

음 모르겠고 튜토리얼이나 읽어봄

클릭이 힘들면 건물명 검색해서 좌표로 변환 후 저장하는거 하자 ㅋㅋ…

naver.maps.Event.addListener

이게 안 먹힘

아 진짜 혹시나 내가 빼먹은 기능떄문인가 싶어서 가서 다시 다 설정해봄

그게 문제가 아니었음

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>네이버지도 스틱코드</title>
  <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=sa2ld1fdvv"></script>
</head>
<body>
<div id="map" style="width:100%; height:800px;"></div>

<script th:inline="javascript">

  var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.5112, 127.0981), // 잠실 롯데월드를 중심으로 하는 지도
    zoom: 15
  });

  var marker = new naver.maps.Marker({
    position: new naver.maps.LatLng(37.5112, 127.0981),
    map: map
  });

</script>

</body>
</html>

이건 잘 되는데 이벤트 리스너가 안 됨…

일단 버튼 달아보고 버튼 클릭시 중심부 좌표가 화면에 출력되게 한번 해봄

이제 location이 중앙값이 전송되게 한번 해 봄

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>네이버지도 스틱코드</title>
  <div class="card-body">
    <input id="store" placeholder="가게" type="text" class="form-control">
    <input id="minPrice" placeholder="최소주문금액" type="text" class="form-control">
    <input id="deliveryCost" placeholder="배달비" type="text" class="form-control">
    <input id="deadlineMins" placeholder="마감시간 시간" type="text" class="form-control">
    <input id="deadlineHours" placeholder="마감시간 분" type="text" class="form-control">
  </div>
  <div th:text="${lat}"></div>
  <div th:text="${lng}"></div>
  <button class="btn btn-outline-secondary" type="button" onclick="setLocation()">작성 완료</button>
  <script type="text/javascript"
          src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=sa2ld1fdvv"></script>
</head>
<body>
<div id="map" style="width:100%; height:800px;"></div>

<script th:inline="javascript">

  var map = new naver.maps.Map('map', {
    zoom: 5,
    center: new naver.maps.LatLng(37.3614483, 127.1114883),
    padding: { top: 100 },
    zoomControl:true,
    zoomControlOptions: {
      style: naver.maps.ZoomControlStyle.SMALL
    }
  });

  var contentEl = $('<div class="iw_inner" style="width:350px;position:absolute;top:0;right:0;z-index:1000;background-color:#fff;border:solid 1px #333;">'
      + '<h3>Map States</h3>'
      + '<p style="font-size:14px;">zoom : <em class="zoom">'+ map.getZoom() +'</em></p>'
      + '<p style="font-size:14px;">centerPoint : <em class="center">'+ map.getCenterPoint() +'</em></p>'
      + '</div>');

  contentEl.appendTo(map.getElement());

  function setLocation() {
    let lat = contentEl.find('.center').text(map.getCenterPoint());

    let address = map.getCenter().toString();
    let store = $('#store').val();
    let minPrice = $('#minPrice').val();
    let deliveryCost = $('#deliveryCost').val();
    let deadlineMins = $('#deadlineMins').val();
    let deadlineHours = $('#deadlineHours').val();
    $.ajax({
      url: "/api/v1/test/posts",
      contentType: 'application/json',
      data: JSON.stringify({
        address: address,
        store: store,
        minPrice: minPrice,
        deliveryCost: deliveryCost,
        deadlineMins: deadlineMins,
        deadlineHours: deadlineHours
      }),
      type: 'POST',
      success: function(response) {
        console.log('Success:', response);
      },
      error: function(error) {
        console.error('Error:', error);
      }
    });


  }

</script>

</body>
</html>

이렇게 넣는데 안 들어감 ㅋㅋㅋ

마커에 상호명 표시 -> 나중에 상세페이지에서 쓰면 좋을듯

https://blog.naver.com/unbend/222266389928

네이버 지도 - 마커에 상호명 텍스트 박스로 표시하기

홈페이지에 네이버 지도 API 적&#...

blog.naver.com

ㅋㅋㅋㅋ 좌표 얻기 이벤트리스너랑 기타등등이 동작을 안 해서 망함 ㅎㅎ

포기하고 geocoding으로 걍 할까 싶어서 이거 하면서 api 부분 geocoding으로 좀 다르길래 바꿔보고

code랑 snippet부분 살려봤더니 클릭이벤트가 됨

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>글 작성하기</title>
</head>
  <div class="card-body">
    <input id="store" placeholder="가게" type="text" class="form-control">
    <input id="minPrice" placeholder="최소주문금액" type="text" class="form-control">
    <input id="deliveryCost" placeholder="배달비" type="text" class="form-control">
    <input id="deadlineMins" placeholder="마감시간 시간" type="text" class="form-control">
    <input id="deadlineHours" placeholder="마감시간 분" type="text" class="form-control">
  </div>
  <div th:text="${lat}"></div>
  <div th:text="${lng}"></div>
  <button class="btn btn-outline-secondary" type="button" onclick="setLocation()">작성 완료</button>
  <script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=sa2ld1fdvv&submodules=geocoder"></script>

<body>
<div id="map" style="width:100%; height:800px;"></div>
<code id="snippet" class="snippet"></code>
<script id="code">
  var map = new naver.maps.Map("map", {
    center: new naver.maps.LatLng(37.3595316, 127.1052133),
    zoom: 15,
    mapTypeControl: true
  });

  var infoWindow = new naver.maps.InfoWindow({
    anchorSkew: true
  });

  map.setCursor('pointer');

  function searchCoordinateToAddress(latlng) {

    infoWindow.close();

    naver.maps.Service.reverseGeocode({
      coords: latlng,
      orders: [
        naver.maps.Service.OrderType.ADDR,
        naver.maps.Service.OrderType.ROAD_ADDR
      ].join(',')
    }, function(status, response) {
      if (status === naver.maps.Service.Status.ERROR) {
        return alert('Something Wrong!');
      }

      var items = response.v2.results,
          address = '',
          htmlAddresses = [];

      for (var i=0, ii=items.length, item, addrType; i<ii; i++) {
        item = items[i];
        address = makeAddress(item) || '';
        addrType = item.name === 'roadaddr' ? '[도로명 주소]' : '[지번 주소]';

        htmlAddresses.push((i+1) +'. '+ addrType +' '+ address);
      }

      infoWindow.setContent([
        '<div style="padding:10px;min-width:200px;line-height:150%;">',
        '<h4 style="margin-top:5px;">검색 좌표</h4><br />',
        htmlAddresses.join('<br />'),
        '</div>'
      ].join('\n'));

      infoWindow.open(map, latlng);
    });
  }

  function searchAddressToCoordinate(address) {
    naver.maps.Service.geocode({
      query: address
    }, function(status, response) {
      if (status === naver.maps.Service.Status.ERROR) {
        return alert('Something Wrong!');
      }

      if (response.v2.meta.totalCount === 0) {
        return alert('totalCount' + response.v2.meta.totalCount);
      }

      var htmlAddresses = [],
          item = response.v2.addresses[0],
          point = new naver.maps.Point(item.x, item.y);

      if (item.roadAddress) {
        htmlAddresses.push('[도로명 주소] ' + item.roadAddress);
      }

      if (item.jibunAddress) {
        htmlAddresses.push('[지번 주소] ' + item.jibunAddress);
      }

      if (item.englishAddress) {
        htmlAddresses.push('[영문명 주소] ' + item.englishAddress);
      }

      infoWindow.setContent([
        '<div style="padding:10px;min-width:200px;line-height:150%;">',
        '<h4 style="margin-top:5px;">검색 주소 : '+ address +'</h4><br />',
        htmlAddresses.join('<br />'),
        '</div>'
      ].join('\n'));

      map.setCenter(point);
      infoWindow.open(map, point);
    });
  }

  function initGeocoder() {
    map.addListener('click', function(e) {
      searchCoordinateToAddress(e.coord);
    });

    $('#address').on('keydown', function(e) {
      var keyCode = e.which;

      if (keyCode === 13) { // Enter Key
        searchAddressToCoordinate($('#address').val());
      }
    });

    $('#submit').on('click', function(e) {
      e.preventDefault();

      searchAddressToCoordinate($('#address').val());
    });

    searchAddressToCoordinate('정자동 178-1');
  }

  function makeAddress(item) {
    if (!item) {
      return;
    }

    var name = item.name,
        region = item.region,
        land = item.land,
        isRoadAddress = name === 'roadaddr';

    var sido = '', sigugun = '', dongmyun = '', ri = '', rest = '';

    if (hasArea(region.area1)) {
      sido = region.area1.name;
    }

    if (hasArea(region.area2)) {
      sigugun = region.area2.name;
    }

    if (hasArea(region.area3)) {
      dongmyun = region.area3.name;
    }

    if (hasArea(region.area4)) {
      ri = region.area4.name;
    }

    if (land) {
      if (hasData(land.number1)) {
        if (hasData(land.type) && land.type === '2') {
          rest += '산';
        }

        rest += land.number1;

        if (hasData(land.number2)) {
          rest += ('-' + land.number2);
        }
      }

      if (isRoadAddress === true) {
        if (checkLastString(dongmyun, '면')) {
          ri = land.name;
        } else {
          dongmyun = land.name;
          ri = '';
        }

        if (hasAddition(land.addition0)) {
          rest += ' ' + land.addition0.value;
        }
      }
    }

    return [sido, sigugun, dongmyun, ri, rest].join(' ');
  }

  function hasArea(area) {
    return !!(area && area.name && area.name !== '');
  }

  function hasData(data) {
    return !!(data && data !== '');
  }

  function checkLastString (word, lastString) {
    return new RegExp(lastString + '$').test(word);
  }

  function hasAddition (addition) {
    return !!(addition && addition.value);
  }

  naver.maps.onJSContentLoaded = initGeocoder;
</script>
<script th:inline="javascript">

  function setLocation() {

    let address = map.getCenterPoint().toString();
    let store = $('#store').val();
    let minPrice = $('#minPrice').val();
    let deliveryCost = $('#deliveryCost').val();
    let deadlineMins = $('#deadlineMins').val();
    let deadlineHours = $('#deadlineHours').val();
    $.ajax({
      url: "/api/v1/test/posts",
      contentType: 'application/json',
      data: JSON.stringify({
        address: address,
        store: store,
        minPrice: minPrice,
        deliveryCost: deliveryCost,
        deadlineMins: deadlineMins,
        deadlineHours: deadlineHours
      }),
      type: 'POST',
      success: function(response) {
        console.log('Success:', response);
      },
      error: function(error) {
        console.error('Error:', error);
      }
    });

  }

</script>

</body>
</html>

그럼 아까 그것도 되는거아님..?

응 이벤트는 여전히 안됨

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>글 작성하기</title>
</head>
  <div class="card-body">
    <input id="store" placeholder="가게" type="text" class="form-control">
    <input id="minPrice" placeholder="최소주문금액" type="text" class="form-control">
    <input id="deliveryCost" placeholder="배달비" type="text" class="form-control">
    <input id="deadlineMins" placeholder="마감시간 시간" type="text" class="form-control">
    <input id="deadlineHours" placeholder="마감시간 분" type="text" class="form-control">
  </div>
  <div th:text="${lat}"></div>
  <div th:text="${lng}"></div>
  <button class="btn btn-outline-secondary" type="button" onclick="setLocation()">작성 완료</button>
<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=sa2ld1fdvv"></script>

<body>
<div id="map" style="width:100%; height:800px;"></div>
<code id="snippet" class="snippet"></code>
<script id="code">
  var map = new naver.maps.Map('map', {
    zoom: 5,
    center: new naver.maps.LatLng(37.3614483, 127.1114883)
  });

  var markerList = [];
  var menuLayer = $('<div style="position:absolute;z-index:10000;background-color:#fff;border:solid 1px #333;padding:10px;display:none;"></div>');

  map.getPanes().floatPane.appendChild(menuLayer[0]);


  naver.maps.Event.addListener(map, 'click', function(e) {
    var marker = new naver.maps.Marker({
      position: e.coord,
      map: map
    });

    markerList.push(marker);
  });

  naver.maps.Event.addListener(map, 'keydown', function(e) {
    var keyboardEvent = e.keyboardEvent,
        keyCode = keyboardEvent.keyCode || keyboardEvent.which;

    var ESC = 27;

    if (keyCode === ESC) {
      keyboardEvent.preventDefault();

      for (var i=0, ii=markerList.length; i<ii; i++) {
        markerList[i].setMap(null);
      }

      markerList = [];

      menuLayer.hide();
    }
  });

  naver.maps.Event.addListener(map, 'mousedown', function(e) {
    menuLayer.hide();
  });

  naver.maps.Event.addListener(map, 'rightclick', function(e) {
    var coordHtml =
        'Coord: '+ '(우 클릭 지점 위/경도 좌표)' + '<br />' +
        'Point: ' + e.point + '<br />' +
        'Offset: ' + e.offset;

    menuLayer.show().css({
      left: e.offset.x,
      top: e.offset.y
    }).html(coordHtml);

    console.log('Coord: ' + e.coord.toString());
  });

</script>
<script th:inline="javascript">

  function setLocation() {

    let address = map.getCenterPoint().toString();
    let store = $('#store').val();
    let minPrice = $('#minPrice').val();
    let deliveryCost = $('#deliveryCost').val();
    let deadlineMins = $('#deadlineMins').val();
    let deadlineHours = $('#deadlineHours').val();
    $.ajax({
      url: "/api/v1/test/posts",
      contentType: 'application/json',
      data: JSON.stringify({
        address: address,
        store: store,
        minPrice: minPrice,
        deliveryCost: deliveryCost,
        deadlineMins: deadlineMins,
        deadlineHours: deadlineHours
      }),
      type: 'POST',
      success: function(response) {
        console.log('Success:', response);
      },
      error: function(error) {
        console.error('Error:', error);
      }
    });

  }

</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>글 작성하기</title>
</head>
  <div class="card-body">
    <input id="store" placeholder="가게" type="text" class="form-control">
    <input id="minPrice" placeholder="최소주문금액" type="text" class="form-control">
    <input id="deliveryCost" placeholder="배달비" type="text" class="form-control">
    <input id="deadlineMins" placeholder="마감시간 시간" type="text" class="form-control">
    <input id="deadlineHours" placeholder="마감시간 분" type="text" class="form-control">
  </div>
  <div th:text="${lat}"></div>
  <div th:text="${lng}"></div>
  <button class="btn btn-outline-secondary" type="button" onclick="setLocation()">작성 완료</button>
  <script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=sa2ld1fdvv&submodules=geocoder"></script>

<body>
<div id="map" style="width:100%; height:800px;"></div>
<code id="snippet" class="snippet"></code>
<script id="code">
  var map = new naver.maps.Map("map", {
        center: new naver.maps.LatLng(37.5666103, 126.9783882),
        zoom: 16
      }),
      infoWindow = null;

  function initGeocoder() {
    var latlng = map.getCenter();
    var utmk = naver.maps.TransCoord.fromLatLngToUTMK(latlng); // 위/경도 -> UTMK
    var tm128 = naver.maps.TransCoord.fromUTMKToTM128(utmk);   // UTMK -> TM128
    var naverCoord = naver.maps.TransCoord.fromTM128ToNaver(tm128); // TM128 -> NAVER

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

    map.addListener('click', function(e) {
      var latlng = e.coord,
          utmk = naver.maps.TransCoord.fromLatLngToUTMK(latlng),
          tm128 = naver.maps.TransCoord.fromUTMKToTM128(utmk),
          naverCoord = naver.maps.TransCoord.fromTM128ToNaver(tm128);

      utmk.x = parseFloat(utmk.x.toFixed(1));
      utmk.y = parseFloat(utmk.y.toFixed(1));

      infoWindow.setContent([
        '<div style="padding:10px;width:380px;font-size:14px;line-height:20px;">',
        '<strong>LatLng</strong> : '+ '좌 클릭 지점 위/경도 좌표' +'<br />',
        '<strong>LatLng</strong> : '+ latlng.toString() +'<br />',
        '<strong>UTMK</strong> : '+ '위/경도 좌표를 UTMK 좌표로 변환한 값' +'<br />',
        '<strong>TM128</strong> : '+ '변환된 UTMK 좌표를 TM128 좌표로 변환한 값' +'<br />',
        '<strong>NAVER</strong> : '+ '변환된 TM128 좌표를 NAVER 좌표로 변환한 값' +'<br />',
        '<strong>NAVER</strong> : '+ naverCoord.toString() +'<br />',
        '</div>'
      ].join(''));

      infoWindow.open(map, latlng);
      console.log('LatLng: ' + latlng.toString());
      console.log('UTMK: ' + utmk.toString());
      console.log('TM128: ' + tm128.toString());
      console.log('NAVER: ' + naverCoord.toString());
    });
  }

  naver.maps.onJSContentLoaded = initGeocoder;
</script>
<script th:inline="javascript">

  function setLocation() {

    let address = map.getCenterPoint().toString();
    let store = $('#store').val();
    let minPrice = $('#minPrice').val();
    let deliveryCost = $('#deliveryCost').val();
    let deadlineMins = $('#deadlineMins').val();
    let deadlineHours = $('#deadlineHours').val();
    $.ajax({
      url: "/api/v1/test/posts",
      contentType: 'application/json',
      data: JSON.stringify({
        address: address,
        store: store,
        minPrice: minPrice,
        deliveryCost: deliveryCost,
        deadlineMins: deadlineMins,
        deadlineHours: deadlineHours
      }),
      type: 'POST',
      success: function(response) {
        console.log('Success:', response);
      },
      error: function(error) {
        console.error('Error:', error);
      }
    });

  }

</script>

</body>
</html>

헐 geocoding은 변환시키니까 좌표값이 나옴!!!

저 좌표로 마크를 찍을수 있는지 테스트해봄

(349534964,149521705)

(lat:37.5677328,lng:126.97341)

저긴 서울이니까 부산에 한번 찍어봄

LatLng

: 좌 클릭 지점 위/경도 좌표

LatLng

: (lat:35.1687257,lng:129.1021828)

UTMK

: 위/경도 좌표를 UTMK 좌표로 변환한 값

TM128

: 변환된 UTMK 좌표를 TM128 좌표로 변환한 값

NAVER

: 변환된 TM128 좌표를 NAVER 좌표로 변환한 값

NAVER

: (351459071,146871144)

마커값 변환시키니까 부산에 좌표가 찍힘…

눈물난다

될때까지 하면 뭐든 되는거임

이제 저 좌표를 보내주기만 하면 될듯함

🚀issue: 좌표를 컨트롤러에 전송하기!

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>글 작성하기</title>
</head>
  <div class="card-body">
    <input id="store" placeholder="가게" type="text" class="form-control">
    <input id="minPrice" placeholder="최소주문금액" type="text" class="form-control">
    <input id="deliveryCost" placeholder="배달비" type="text" class="form-control">
    <input id="deadlineMins" placeholder="마감시간 시간" type="text" class="form-control">
    <input id="deadlineHours" placeholder="마감시간 분" type="text" class="form-control">
  </div>
  <div th:text="${lat}"></div>
  <div th:text="${lng}"></div>
  <button class="btn btn-outline-secondary" type="button" onclick="setLocation()">작성 완료</button>
  <script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=sa2ld1fdvv&submodules=geocoder"></script>

<body>
<div id="map" style="width:100%; height:800px;"></div>
<code id="snippet" class="snippet"></code>
<script id="code">
  var map = new naver.maps.Map("map", {
        center: new naver.maps.LatLng(37.5666103, 126.9783882),
        zoom: 16
      }),
      infoWindow = null;
  var latlng;

  function initGeocoder() {
    var latlng = map.getCenter();
    var utmk = naver.maps.TransCoord.fromLatLngToUTMK(latlng); // 위/경도 -> UTMK
    var tm128 = naver.maps.TransCoord.fromUTMKToTM128(utmk);   // UTMK -> TM128
    var naverCoord = naver.maps.TransCoord.fromTM128ToNaver(tm128); // TM128 -> NAVER

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

    map.addListener('click', function(e) {
      var latlng = e.coord,
          utmk = naver.maps.TransCoord.fromLatLngToUTMK(latlng),
          tm128 = naver.maps.TransCoord.fromUTMKToTM128(utmk),
          naverCoord = naver.maps.TransCoord.fromTM128ToNaver(tm128);

      utmk.x = parseFloat(utmk.x.toFixed(1));
      utmk.y = parseFloat(utmk.y.toFixed(1));

      infoWindow.setContent([
        '<div style="padding:10px;width:380px;font-size:14px;line-height:20px;">',
        '<strong>LatLng</strong> : '+ '좌 클릭 지점 위/경도 좌표' +'<br />',
        '<strong>LatLng</strong> : '+ latlng.toString() +'<br />',
        '<strong>UTMK</strong> : '+ '위/경도 좌표를 UTMK 좌표로 변환한 값' +'<br />',
        '<strong>TM128</strong> : '+ '변환된 UTMK 좌표를 TM128 좌표로 변환한 값' +'<br />',
        '<strong>NAVER</strong> : '+ '변환된 TM128 좌표를 NAVER 좌표로 변환한 값' +'<br />',
        '<strong>NAVER</strong> : '+ naverCoord.toString() +'<br />',
        '</div>'
      ].join(''));

      infoWindow.open(map, latlng);
      console.log('LatLng: ' + latlng.toString());
      console.log('UTMK: ' + utmk.toString());
      console.log('TM128: ' + tm128.toString());
      console.log('NAVER: ' + naverCoord.toString());
    });
  }

  naver.maps.onJSContentLoaded = initGeocoder;
</script>
<script th:inline="javascript">

  function setLocation() {

    let address = latlng.toString();
    let store = $('#store').val();
    let minPrice = $('#minPrice').val();
    let deliveryCost = $('#deliveryCost').val();
    let deadlineMins = $('#deadlineMins').val();
    let deadlineHours = $('#deadlineHours').val();
    $.ajax({
      url: "/api/v1/test/posts",
      contentType: 'application/json',
      data: JSON.stringify({
        address: address,
        store: store,
        minPrice: minPrice,
        deliveryCost: deliveryCost,
        deadlineMins: deadlineMins,
        deadlineHours: deadlineHours
      }),
      type: 'POST',
      success: function(response) {
        console.log('Success:', response);
      },
      error: function(error) {
        console.error('Error:', error);
      }
    });

  }

</script>

</body>
</html>

이렇게 해봤는데 안 넘어감 ㅋㅋㅋㅋ

전역변수에다 저장하고 넘기고싶은데 어케해요

한 script 안에 있어야 하나 싶어서

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>글 작성하기</title>
</head>
  <div class="card-body">
    <input id="store" placeholder="가게" type="text" class="form-control">
    <input id="minPrice" placeholder="최소주문금액" type="text" class="form-control">
    <input id="deliveryCost" placeholder="배달비" type="text" class="form-control">
    <input id="deadlineMins" placeholder="마감시간 시간" type="text" class="form-control">
    <input id="deadlineHours" placeholder="마감시간 분" type="text" class="form-control">
  </div>
  <div th:text="${lat}"></div>
  <div th:text="${lng}"></div>
  <button class="btn btn-outline-secondary" type="button" onclick="setLocation()">작성 완료</button>
  <script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=sa2ld1fdvv&submodules=geocoder"></script>

<body>
<div id="map" style="width:100%; height:800px;"></div>
<code id="snippet" class="snippet"></code>
<script id="code">
  var map = new naver.maps.Map("map", {
        center: new naver.maps.LatLng(37.5666103, 126.9783882),
        zoom: 16
      }),
      infoWindow = null;
  var latlng;

  function initGeocoder() {
    var latlng = map.getCenter();
    var utmk = naver.maps.TransCoord.fromLatLngToUTMK(latlng); // 위/경도 -> UTMK
    var tm128 = naver.maps.TransCoord.fromUTMKToTM128(utmk);   // UTMK -> TM128
    var naverCoord = naver.maps.TransCoord.fromTM128ToNaver(tm128); // TM128 -> NAVER

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

    map.addListener('click', function(e) {
      var latlng = e.coord,
          utmk = naver.maps.TransCoord.fromLatLngToUTMK(latlng),
          tm128 = naver.maps.TransCoord.fromUTMKToTM128(utmk),
          naverCoord = naver.maps.TransCoord.fromTM128ToNaver(tm128);

      utmk.x = parseFloat(utmk.x.toFixed(1));
      utmk.y = parseFloat(utmk.y.toFixed(1));

      infoWindow.setContent([
        '<div style="padding:10px;width:380px;font-size:14px;line-height:20px;">',
        '<strong>LatLng</strong> : '+ '좌 클릭 지점 위/경도 좌표' +'<br />',
        '<strong>LatLng</strong> : '+ latlng.toString() +'<br />',
        '<strong>UTMK</strong> : '+ '위/경도 좌표를 UTMK 좌표로 변환한 값' +'<br />',
        '<strong>TM128</strong> : '+ '변환된 UTMK 좌표를 TM128 좌표로 변환한 값' +'<br />',
        '<strong>NAVER</strong> : '+ '변환된 TM128 좌표를 NAVER 좌표로 변환한 값' +'<br />',
        '<strong>NAVER</strong> : '+ naverCoord.toString() +'<br />',
        '</div>'
      ].join(''));

      infoWindow.open(map, latlng);
      console.log('LatLng: ' + latlng.toString());
      console.log('UTMK: ' + utmk.toString());
      console.log('TM128: ' + tm128.toString());
      console.log('NAVER: ' + naverCoord.toString());
    });
  }

  naver.maps.onJSContentLoaded = initGeocoder;

  function setLocation() {

    let address = latlng.toString();
    let store = $('#store').val();
    let minPrice = $('#minPrice').val();
    let deliveryCost = $('#deliveryCost').val();
    let deadlineMins = $('#deadlineMins').val();
    let deadlineHours = $('#deadlineHours').val();
    $.ajax({
      url: "/api/v1/test/posts",
      contentType: 'application/json',
      data: JSON.stringify({
        address: address,
        store: store,
        minPrice: minPrice,
        deliveryCost: deliveryCost,
        deadlineMins: deadlineMins,
        deadlineHours: deadlineHours
      }),
      type: 'POST',
      success: function(response) {
        console.log('Success:', response);
      },
      error: function(error) {
        console.error('Error:', error);
      }
    });

  }
</script>
<script th:inline="javascript">



</script>

</body>
</html>

script 저기로 옮겨봄

여전히 db에 안 들어가짐

var로 선언되어있던 larlng를 전체에다 선언하고 다른데 larlng에서는 다 var자 빼봄

전역변수 해주라 제발

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>글 작성하기</title>
</head>
  <div class="card-body">
    <input id="store" placeholder="가게" type="text" class="form-control">
    <input id="minPrice" placeholder="최소주문금액" type="text" class="form-control">
    <input id="deliveryCost" placeholder="배달비" type="text" class="form-control">
    <input id="deadlineMins" placeholder="마감시간 시간" type="text" class="form-control">
    <input id="deadlineHours" placeholder="마감시간 분" type="text" class="form-control">
  </div>
  <div th:text="${lat}"></div>
  <div th:text="${lng}"></div>
  <button class="btn btn-outline-secondary" type="button" onclick="setLocation()">작성 완료</button>
  <script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=sa2ld1fdvv&submodules=geocoder"></script>

<body>
<div id="map" style="width:100%; height:800px;"></div>
<code id="snippet" class="snippet"></code>
<script id="code">
  var map = new naver.maps.Map("map", {
        center: new naver.maps.LatLng(37.5666103, 126.9783882),
        zoom: 16
      }),
      infoWindow = null;
  var latlng;

  function initGeocoder() {
    latlng = map.getCenter();
    var utmk = naver.maps.TransCoord.fromLatLngToUTMK(latlng); // 위/경도 -> UTMK
    var tm128 = naver.maps.TransCoord.fromUTMKToTM128(utmk);   // UTMK -> TM128
    var naverCoord = naver.maps.TransCoord.fromTM128ToNaver(tm128); // TM128 -> NAVER

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

    map.addListener('click', function(e) {
      latlng = e.coord;
      var utmk = naver.maps.TransCoord.fromLatLngToUTMK(latlng),
          tm128 = naver.maps.TransCoord.fromUTMKToTM128(utmk),
          naverCoord = naver.maps.TransCoord.fromTM128ToNaver(tm128);

      utmk.x = parseFloat(utmk.x.toFixed(1));
      utmk.y = parseFloat(utmk.y.toFixed(1));

      infoWindow.setContent([
        '<div style="padding:10px;width:380px;font-size:14px;line-height:20px;">',
        '<strong>LatLng</strong> : '+ '좌 클릭 지점 위/경도 좌표' +'<br />',
        '<strong>LatLng</strong> : '+ latlng.toString() +'<br />',
        '<strong>UTMK</strong> : '+ '위/경도 좌표를 UTMK 좌표로 변환한 값' +'<br />',
        '<strong>TM128</strong> : '+ '변환된 UTMK 좌표를 TM128 좌표로 변환한 값' +'<br />',
        '<strong>NAVER</strong> : '+ '변환된 TM128 좌표를 NAVER 좌표로 변환한 값' +'<br />',
        '<strong>NAVER</strong> : '+ naverCoord.toString() +'<br />',
        '</div>'
      ].join(''));

      infoWindow.open(map, latlng);
      console.log('LatLng: ' + latlng.toString());
      console.log('UTMK: ' + utmk.toString());
      console.log('TM128: ' + tm128.toString());
      console.log('NAVER: ' + naverCoord.toString());
    });
  }

  naver.maps.onJSContentLoaded = initGeocoder;

  function setLocation() {

    let address = latlng.toString();
    let store = $('#store').val();
    let minPrice = $('#minPrice').val();
    let deliveryCost = $('#deliveryCost').val();
    let deadlineMins = $('#deadlineMins').val();
    let deadlineHours = $('#deadlineHours').val();
    $.ajax({
      url: "/api/v1/test/posts",
      contentType: 'application/json',
      data: JSON.stringify({
        address: address,
        store: store,
        minPrice: minPrice,
        deliveryCost: deliveryCost,
        deadlineMins: deadlineMins,
        deadlineHours: deadlineHours
      }),
      type: 'POST',
      success: function(response) {
        console.log('Success:', response);
      },
      error: function(error) {
        console.error('Error:', error);
      }
    });

  }
</script>
<script th:inline="javascript">



</script>

</body>
</html>

여전히 db에 저장이 안 됨

let address = latlng.toString();

toString을 빼봄

설마 script id=code안에 있어서 ajax 자체가 실행이 안 되나??

<script th:inline="javascript">

이걸로 바꿔봄

음 여전히 안 됨~

한번 address field 빼고 보내봄

음 그래도 안 들어감

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>글 작성하기</title>
</head>
  <div class="card-body">
    <input id="store" placeholder="가게" type="text" class="form-control">
    <input id="minPrice" placeholder="최소주문금액" type="text" class="form-control">
    <input id="deliveryCost" placeholder="배달비" type="text" class="form-control">
    <input id="deadlineMins" placeholder="마감시간 시간" type="text" class="form-control">
    <input id="deadlineHours" placeholder="마감시간 분" type="text" class="form-control">
  </div>
  <div th:text="${latlng}"></div>
  <button class="btn btn-outline-secondary" type="button" onclick="sendData()">작성 완료</button>
  <script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=sa2ld1fdvv&submodules=geocoder"></script>

<body>
<div id="map" style="width:100%; height:800px;"></div>
<code id="snippet" class="snippet"></code>
<script th:inline="javascript">
  var map = new naver.maps.Map("map", {
        center: new naver.maps.LatLng(37.5666103, 126.9783882),
        zoom: 16
      }),
      infoWindow = null;

  var latlng;

  function initGeocoder() {
    latlng = map.getCenter();
    var utmk = naver.maps.TransCoord.fromLatLngToUTMK(latlng); // 위/경도 -> UTMK
    var tm128 = naver.maps.TransCoord.fromUTMKToTM128(utmk);   // UTMK -> TM128
    var naverCoord = naver.maps.TransCoord.fromTM128ToNaver(tm128); // TM128 -> NAVER

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

    map.addListener('click', function(e) {
      latlng = e.coord;
      var utmk = naver.maps.TransCoord.fromLatLngToUTMK(latlng),
          tm128 = naver.maps.TransCoord.fromUTMKToTM128(utmk),
          naverCoord = naver.maps.TransCoord.fromTM128ToNaver(tm128);

      utmk.x = parseFloat(utmk.x.toFixed(1));
      utmk.y = parseFloat(utmk.y.toFixed(1));

      infoWindow.setContent([
        '<div style="padding:10px;width:380px;font-size:14px;line-height:20px;">',
        '<strong>LatLng</strong> : '+ '좌 클릭 지점 위/경도 좌표' +'<br />',
        '<strong>LatLng</strong> : '+ latlng.toString() +'<br />',
        '<strong>UTMK</strong> : '+ '위/경도 좌표를 UTMK 좌표로 변환한 값' +'<br />',
        '<strong>TM128</strong> : '+ '변환된 UTMK 좌표를 TM128 좌표로 변환한 값' +'<br />',
        '<strong>NAVER</strong> : '+ '변환된 TM128 좌표를 NAVER 좌표로 변환한 값' +'<br />',
        '<strong>NAVER</strong> : '+ naverCoord.toString() +'<br />',
        '</div>'
      ].join(''));

      infoWindow.open(map, latlng);
      console.log('LatLng: ' + latlng.toString());
      console.log('UTMK: ' + utmk.toString());
      console.log('TM128: ' + tm128.toString());
      console.log('NAVER: ' + naverCoord.toString());
    });
  }

  naver.maps.onJSContentLoaded = initGeocoder;

  function sendData() {

    //let address = latlng;
    let store = $('#store').val();
    let minPrice = $('#minPrice').val();
    let deliveryCost = $('#deliveryCost').val();
    let deadlineMins = $('#deadlineMins').val();
    let deadlineHours = $('#deadlineHours').val();
    $.ajax({
      url: "/api/v1/test/posts",
      contentType: 'application/json',
      data: JSON.stringify({
        //address: address,
        store: store,
        minPrice: minPrice,
        deliveryCost: deliveryCost,
        deadlineMins: deadlineMins,
        deadlineHours: deadlineHours
      }),
      type: 'POST',
      success: function(response) {
        console.log('Success:', response);
      },
      error: function(error) {
        console.error('Error:', error);
      }
    });

  }
</script>
<script th:inline="javascript">



</script>

</body>
</html>

'<strong id = "location">LatLng</strong> : '+ latlng.toString() +'<br />',

여기다 id값 부여하고 그걸로 읽어와봄

let address = $('#location').val();

아직도 안 날아감 ㅋㅋ

ajax가 왜 안날아가냐고요

div로 바꿔봄

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>글 작성하기</title>
</head>
  <div class="card-body">
    <input id="store" placeholder="가게" type="text" class="form-control">
    <input id="minPrice" placeholder="최소주문금액" type="text" class="form-control">
    <input id="deliveryCost" placeholder="배달비" type="text" class="form-control">
    <input id="deadlineMins" placeholder="마감시간 시간" type="text" class="form-control">
    <input id="deadlineHours" placeholder="마감시간 분" type="text" class="form-control">
  </div>
  <button class="btn btn-outline-secondary" type="button" onclick="sendData()">작성 완료</button>
  <script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=sa2ld1fdvv&submodules=geocoder"></script>

<body>
<div id="map" style="width:100%; height:800px;"></div>
<code id="snippet" class="snippet"></code>
<script th:inline="javascript">
  // var map = new naver.maps.Map("map", {
  //       center: new naver.maps.LatLng(37.5666103, 126.9783882),
  //       zoom: 16
  //     }),
  //     infoWindow = null;
  //
  // var latlng;
  //
  // function initGeocoder() {
  //   latlng = map.getCenter();
  //   var utmk = naver.maps.TransCoord.fromLatLngToUTMK(latlng); // 위/경도 -> UTMK
  //   var tm128 = naver.maps.TransCoord.fromUTMKToTM128(utmk);   // UTMK -> TM128
  //   var naverCoord = naver.maps.TransCoord.fromTM128ToNaver(tm128); // TM128 -> NAVER
  //
  //   infoWindow = new naver.maps.InfoWindow({
  //     content: ''
  //   });
  //
  //   map.addListener('click', function(e) {
  //     latlng = e.coord;
  //     var utmk = naver.maps.TransCoord.fromLatLngToUTMK(latlng),
  //         tm128 = naver.maps.TransCoord.fromUTMKToTM128(utmk),
  //         naverCoord = naver.maps.TransCoord.fromTM128ToNaver(tm128);
  //
  //     utmk.x = parseFloat(utmk.x.toFixed(1));
  //     utmk.y = parseFloat(utmk.y.toFixed(1));
  //
  //     infoWindow.setContent([
  //       '<div style="padding:10px;width:380px;font-size:14px;line-height:20px;">',
  //       '<div>LatLng</div> : '+ '좌 클릭 지점 위/경도 좌표' +'</div>',
  //       '<div id = "location">'+ latlng.toString() +'</div>',
  //       '</div>'
  //     ].join(''));
  //     infoWindow.open(map, latlng);
  //   });
  // }
  //
  // naver.maps.onJSContentLoaded = initGeocoder;

  function sendData() {

    //let address = latlng.toString();
    let store = $('#store').val();
    let minPrice = $('#minPrice').val();
    let deliveryCost = $('#deliveryCost').val();
    let deadlineMins = $('#deadlineMins').val();
    let deadlineHours = $('#deadlineHours').val();
    $.ajax({
      url: "/api/v1/test/posts",
      contentType: 'application/json',
      data: JSON.stringify({
        //address: address,
        store: store,
        minPrice: minPrice,
        deliveryCost: deliveryCost,
        deadlineMins: deadlineMins,
        deadlineHours: deadlineHours
      }),
      type: 'POST',
      success: function(response) {
        console.log('Success:', response);
      },
      error: function(error) {
        console.error('Error:', error);
      }
    });
  }
</script>

</body>
</html>

저걸 주석처리하면 들어가는지 한번 봄

응 그래도 안들어감~

code = snippet 부분 삭제해봄

아무 영향 없음

구글링해보니

일단 dataType : "json", 도 추가해봄

$.ajax({
      type: 'POST',
      url: "/api/v1/test/posts",
      dataType : "json",
      contentType: 'application/json',
      data: JSON.stringify({
        address: address,
        store: store,
        minPrice: minPrice,
        deliveryCost: deliveryCost,
        deadlineMins: deadlineMins,
        deadlineHours: deadlineHours
      }),
      success: function(response) {
        console.log('Success:', response);
      },
      error: function(error) {
        console.error('Error:', error);
      }
    });

저거 빼보라는 사람 있어서 한번 빼봄

$.ajax({
      type: 'POST',
      url: "/api/v1/test/posts",
      data: {
        address: address,
        store: store,
        minPrice: minPrice,
        deliveryCost: deliveryCost,
        deadlineMins: deadlineMins,
        deadlineHours: deadlineHours
      }
    });

오 브라우저 개발자도구 켰더니 뭐가 나와있음

maps.js?ncpClientId=sa2ld1fdvv&submodules=geocoder:15 A parser-blocking, cross site (i.e. different eTLD+1) script, https://oapi.map.naver.com/openapi/v3/maps-geocoder.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details. (anonymous) @ maps.js?ncpClientId=sa2ld1fdvv&submodules=geocoder:15 maps.js?ncpClientId=sa2ld1fdvv&submodules=geocoder:15 A parser-blocking, cross site (i.e. different eTLD+1) script, https://oapi.map.naver.com/openapi/v3/maps-geocoder.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details. (anonymous) @ maps.js?ncpClientId=sa2ld1fdvv&submodules=geocoder:15 :8080/favicon.ico:1

2maps:63 Uncaught ReferenceError: $ is not defined at sendData (maps:63:17) at HTMLButtonElement.onclick (maps:17:80)

→ ㅋㅋ 이 메시지를 몇시간 전에 봤으면 얼마나 좋았을까

와 $가 왜 정의가 안됐다는건지 생각해보니

jquery 스크립트 추가를 안 했어

⛳해결 : jQuery 스크립트 추가해줌

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

이거 추가해봄

해결됨

와 ㅜㅜㅜ

{status: 201, message: '글을 생성했습니다.', data: null}

됐다~~~

된 코드

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
        name="viewport">
  <title>글 작성하기</title>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <script src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=sa2ld1fdvv&submodules=geocoder"
          type="text/javascript"></script>
</head>
<body>
<div class="card-body">
  <input class="form-control" id="store" placeholder="가게" type="text">
  <input class="form-control" id="minPrice" placeholder="최소주문금액" type="text">
  <input class="form-control" id="deliveryCost" placeholder="배달비" type="text">
  <input class="form-control" id="deadlineMins" placeholder="마감시간 시간" type="text">
  <input class="form-control" id="deadlineHours" placeholder="마감시간 분" type="text">
</div>
<button class="btn btn-outline-secondary" onclick="sendData()" type="button">작성 완료</button>

<div id="map" style="width:100%; height:800px;"></div>

<script th:inline="javascript">
  var map = new naver.maps.Map("map", {
        center: new naver.maps.LatLng(37.5666103, 126.9783882),
        zoom: 16
      }),
      infoWindow = null;

  var latlng;

  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:380px;font-size:14px;line-height:20px;">',
        '<div> ' + ' ' + '</div>',
        '</div>'
      ].join(''));
      infoWindow.open(map, latlng);
    });
  }

  naver.maps.onJSContentLoaded = initGeocoder;

  function sendData() {

    let address = latlng.toString();
    let store = $('#store').val();
    let minPrice = $('#minPrice').val();
    let deliveryCost = $('#deliveryCost').val();
    let deadlineMins = $('#deadlineMins').val();
    let deadlineHours = $('#deadlineHours').val();
    $.ajax({
      type: 'POST',
      url: "/api/v1/test/posts",
      dataType: "json",
      contentType: 'application/json',
      data: JSON.stringify({
        address: address,
        store: store,
        minPrice: minPrice,
        deliveryCost: deliveryCost,
        deadlineMins: deadlineMins,
        deadlineHours: deadlineHours
      }),
      success: function (response) {
        console.log('Success:', response);
      },
      error: function (error) {
        console.error('Error:', error);
      }
    });
  }
</script>

</body>
</html>

내일 lat이랑 lng분리해서 넣고 infowindow 출력값 좀 다듬고

글 상세페이지 만들면서 테이블이랑 마커 해야지~~~

2. 주문완료기능 개발

PostController

//주문 완료
    @PatchMapping("/posts/complete-order")
    public ApiResponse<Void> completeOrder(
        @AuthenticationPrincipal UserDetailsImpl userDetails,
        @Valid @RequestBody PostIdRequest postIdReq
    ) {
        postService.completeOrder(postIdReq, userDetails.getUser());
        return new ApiResponse<>(HttpStatus.OK.value(), "주문완료 처리가 되었습니다.");
    }

PostService

@Override
    public void completeOrder(PostIdRequest postIdReq, User user) {
        //check if there is a post with the post id
        Post post = getPostById(postIdReq.postId());
        //check if the user is the host of the post
        checkIfHost(user,post);
        //check if the status is OPEN
        if(post.getPostStatus()==PostStatusEnum.OPEN){
            throw new GlobalException(PostErrorCode.CLOSE_FIRST);
        }else if(post.getPostStatus()==PostStatusEnum.ORDERED||post.getPostStatus()==PostStatusEnum.RECEIVED){
            throw new GlobalException(PostErrorCode.POST_ALREADY_COMPLETED_ORDER);
        }
        post.completeOrder();
        postRepository.save(post);
    }

Post

public void completeOrder() {
        this.postStatus = PostStatusEnum.ORDERED;
    }

잘 된다

저작자표시

'개발일지' 카테고리의 다른 글

2024-01-15, Today I Learned (0)	2024.01.15
2024-01-14, Today I Learned (0)	2024.01.15
2024-01-12, Today I Learned (0)	2024.01.12
2024-01-11, Today I Learned (1)	2024.01.11
2023-01-10, Today I Learned (0)	2024.01.10

Greedeveloper

2024-01-13, Today I Learned

오늘 할 일

1. 지도 api에서 좌표값 가져오기

1. 클라이언트 아이디 발급

🚩문제 : 동적인 클릭이 안 됨, 등록된 모든 이벤트 예제의 naver.maps.Event.addListener가 안 먹힘

이벤트 기본 예제

KVO 이벤트

🚀issue: 좌표를 컨트롤러에 전송하기!

⛳해결 : jQuery 스크립트 추가해줌

2. 주문완료기능 개발

'개발일지' 카테고리의 다른 글

티스토리툴바

2024-01-13, Today I Learned

오늘 할 일

1. 지도 api에서 좌표값 가져오기

1. 클라이언트 아이디 발급

🚩문제 : 동적인 클릭이 안 됨, 등록된 모든 이벤트 예제의 naver.maps.Event.addListener가 안 먹힘

이벤트 기본 예제

KVO 이벤트

🚀issue: 좌표를 컨트롤러에 전송하기!

⛳해결 : jQuery 스크립트 추가해줌

2. 주문완료기능 개발

'개발일지' 카테고리의 다른 글

관련글

티스토리툴바