네이버 지도 적용하기

[Galocg]

완료

1. 마커 추가 ( 테스트로 시청역 근처 카페들 )
2. 마커 클릭시 경로 색칠 이벤트 + 장소명 표시

앞으로 추가해야 되는 것

1. 애견카페, 공원 등등 카테고리 선택할 수 있게 메뉴바 만들기
2. 마커 아이콘, 클릭시 안내 메시지 나오는 말풍선 html 꾸미기
3. (변경) 기본적으로 장소명은 다 떠있는걸로 하고 터치하면 해당 장소 말풍선 하이라이트 되도록

[jikjoo]

현재 위치 얻기 https://www.ncloud.com/product/applicationService/geoLocation 월 1,000건 제한 (무료 최대)

[jikjoo]

https://www.ncloud.com/mypage/manage/authkey https://console.ncloud.com/apigw/apiKeys Access Key ID = c2fldop3dsoALgIbZM6U Secret Key = TQbnUDxIfIqL8GgFnaBFoHJwRhbb3YWVkK4Zcqxw API Key ID = 7qk8mgoaoc API key = gbwcdRWpV8uIxYE0qvTUqeWmtMOFMutihZbEhPIx

[jikjoo]

javascript v2 예시

require('dotenv').config();
const axios = require('axios');
const CryptoJS = require("crypto-js");

const access_key = process.env.access_key;
const secret_key = process.env.secret_key;

const requestMethod = "GET";
const hostName = 'https://geolocation.apigw.ntruss.com'
const requestUrl= '/geolocation/v2/geoLocation'

const timeStamp = Math.floor(+new Date).toString();

(()=>{
  const sortedSet = {};
  sortedSet["ip"] = "211.36.142.207";
  sortedSet["ext"] = "t";
  sortedSet["responseFormatType"] = "json";

  let queryString = Object.keys(sortedSet).reduce( (prev, curr)=>{
    return prev + curr + '=' + sortedSet[curr] + '&';
  }, "");

  queryString = queryString.substr(0, queryString.length -1 );

  const baseString = requestUrl + "?" + queryString;
  const signature = makeSignature(secret_key, requestMethod, baseString, timeStamp, access_key);

  const config = {
    headers: {
      'x-ncp-apigw-timestamp': timeStamp,
      'x-ncp-iam-access-key' : access_key,
      'x-ncp-apigw-signature-v2': signature
    }
  }

  axios.get(`${hostName}${baseString}`, config)
    .then( response=>{ console.log( response.data ); })
    .catch( error =>{ console.log( error.response.data ); })
})();

function makeSignature(secretKey, method, baseString, timestamp, accessKey) {
    const space = " ";
    const newLine = "\n";
    let hmac = CryptoJS.algo.HMAC.create(CryptoJS.algo.SHA256, secretKey);

    hmac.update(method);
    hmac.update(space);
    hmac.update(baseString);
    hmac.update(newLine);
    hmac.update(timestamp);
    hmac.update(newLine);
    hmac.update(accessKey);
    const hash = hmac.finalize();

    return hash.toString(CryptoJS.enc.Base64);
}

[jikjoo]

curl -i -X GET \
   -H "x-ncp-apigw-timestamp:"1597922631969" \
   -H "x-ncp-apigw-api-key:cstWXuw4wqp1EfuqDwZeMz5fh0epaTykRRRuy5Ra" \
   -H "x-ncp-iam-access-key:"c2fldop3dsoALgIbZM6U" \
   -H "x-ncp-apigw-signature-v2:KgXtwU2xUbTrWl1T5WWuJfrJylbEmixAZrFE6u5mp1M=" \
 'https://geolocation.apigw.ntruss.com/geolocation/v2/geoLocation?ip=175.116.200.137&ext=t&responseFormatType=json'

Authorization 오류 나옴

https://apidocs.ncloud.com/ko/ai-application-service/geolocation/

[jikjoo]

~https://docs.ncloud.com/ko/apigw/apigw-2-1.html 에서 Product 생성하고, API 생성하고 CORS 설정해야함~

서버에서 API 호출하기. /location/geolocation으로 호출