당근먹는하니
귀엽고 행복해
당근먹는하니
전체 방문자
오늘
어제
  • 분류 전체보기 (274)
    • 다람쥐🐿 (26)
    • C++ 공부빵야 (7)
    • 공부👻 (5)
    • 프론트엔드✏️ (228)
      • 코드캠프 (120)
      • 팀 프로젝트✨ (31)
      • 개인공부 (67)
    • 프론트엔드 - 바닐라js (7)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • javascript
  • 코딩 부트캠프
  • HTML
  • 회고
  • next.js
  • 팀플
  • React-hook-form
  • javascrpit
  • 부트캠프
  • typescript
  • 코드캠프
  • 배포
  • refreshtoken
  • 코딩
  • graphql
  • 자바스크립트
  • JS
  • algorithm
  • react
  • emotion
  • CSS
  • ssg
  • 배열
  • 팀 프로젝트
  • 알고리즘
  • 프로그래머스
  • 공통 컴포넌트
  • 팀프로젝트
  • 리액트
  • 프론트엔드

최근 댓글

최근 글

티스토리

250x250
반응형
hELLO · Designed By 정상우.
당근먹는하니

귀엽고 행복해

220619 프론트엔드 부트캠프 : 주말, 카카오맵 마커 변경
프론트엔드✏️/코드캠프

220619 프론트엔드 부트캠프 : 주말, 카카오맵 마커 변경

2022. 6. 20. 15:27
728x90
반응형
import Head from "next/head";
import { useEffect } from "react";

// 윈도우에 카카오 있어!
declare const window: typeof globalThis & {
  kakao: any;
};

// window.alert()
// window.confirm()
// window.kakao // 이렇게 생긴 것

export default function KakaoMapPage() {
  useEffect(() => {
    // 여기서 스크립트를 받고 받을 때까지 기다릴거야.
    // createElement el이 태그
    const script = document.createElement("script"); // <script></script>
    script.src =
      "//dapi.kakao.com/v2/maps/sdk.js?appkey={앱키}&autoload=false";
    document.head.appendChild(script); // 헤드 자식으로 script 넣을거야

    // 로드 되면 그 때 얘네 실행시켜줘! + 카카오 라이브러리도 다운되어야해.(독스 고고)
    script.onload = () => {
      window.kakao.maps.load(function () {
        const container = document.getElementById("map"); // 지도를 담을 영역의 DOM
        const options = {
          // 지도를 생성할 때 필요한 기본 옵션
          center: new window.kakao.maps.LatLng(37.4923, 126.9208), // 지도의 중심좌표.
          level: 3, // 지도의 레벨(확대, 축소 정도)
        };
        const map = new window.kakao.maps.Map(container, options); // 지도 생성 및 객체 리턴

        const imageSrc = "/img/놀자에몽.png"; // 마커이미지의 주소입니다
        const imageSize = new window.kakao.maps.Size(64, 69); // 마커이미지의 크기입니다
        const imageOption = { offset: new window.kakao.maps.Point(27, 69) }; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.

        // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
        const markerImage = new window.kakao.maps.MarkerImage(
          imageSrc,
          imageSize,
          imageOption
        );

        //    // 마커가 표시될 위치입니다
        //    const markerPosition = new window.kakao.maps.LatLng(37.4923, 126.9208);

        // 마커를 생성합니다
        const marker = new window.kakao.maps.Marker({
          position: map.getCenter(),
          image: markerImage,
        });

        // 마커가 지도 위에 표시되도록 설정합니다
        marker.setMap(map);

        // 지도에 클릭 이벤트를 등록합니다
        // 지도를 클릭하면 마지막 파라미터로 넘어온 함수를 호출합니다
        window.kakao.maps.event.addListener(
          map,
          "click",
          function (mouseEvent) {
            // 클릭한 위도, 경도 정보를 가져옵니다
            const latlng = mouseEvent.latLng;

            // 마커 위치를 클릭한 위치로 옮깁니다
            marker.setPosition(latlng);
          }
        );
      });
    };
  }, []);

  return (
    <>
      <Head>
        <script
          type="text/javascript"
          src="//dapi.kakao.com/v2/maps/sdk.js?appkey={앱키}"
        ></script>
      </Head>
      <div id="map" style={{ width: "500px", height: "400px" }}></div>
    </>
  );
}
이미지는 따로 크기 안 줄여도 코드 안에서 이미지 크기를 정해줬기 때문에 알아서 작아집니다.

놀자에몽 이미지 출처는
https://www.inven.co.kr/board/lostark/4811/3494977

로스트아크 인벤 : [놀자에몽] 배달~ - 로스트아크 인벤 자유 게시판

고화질로 쓰고싶은 욕망1.투명배경2.흰배경+귀걸이 수정됨..[놀자에요] [머쓱해요] [뭐라구요] [웃프네요] [추천이요] ↓https://www.inven.co.kr/board/lostark/4811/3490820[머쓱환에요] [정말이요] [웃기구요] 

www.inven.co.kr





{success: true, imp_uid: 'imp_@@@@@@, pay_method: 'point', merchant_uid: 'n@@@@@@@@ name: '요정@@@@의 축복', …}apply_num: ""bank_name: nullbuyer_addr: "서울특별시 강남구 신사동"buyer_email: "oi@@@@u@gmail.com"buyer_name: "만두"buyer_postcode: "01181"buyer_tel: "010-222-2222"card_name: nullcard_number: "****"card_quota: 0currency: "KRW"custom_data: nullimp_uid: "imp_@4"merchant_uid: "nobody_1@@@@@4"name: "요정@@@@의 축복"paid_amount: 1004paid_at: 1655628846pay_method: "point"pg_provider: "nice"pg_tid: "nictest00m010@@@9"pg_type: "payment"receipt_url: "https://npg.nicepay.@@@@@@@@@=Y"status: "paid"success: true[[Prototype]]: Object

더보기


뭐지 이 코드...?

728x90
반응형
저작자표시 비영리 동일조건 (새창열림)

'프론트엔드✏️ > 코드캠프' 카테고리의 다른 글

알고리즘 - 실패율, indexOf, lastIndexOf, 배열을 객체처럼!  (0) 2022.06.21
220620 프론트엔드 부트캠프 41일차 : refreshToken, Graphql은 사실ㅇ0ㅇ  (0) 2022.06.20
220617 프론트엔드 부트캠프 38일차: 카카오맵, SPA, MPA, callback-hell, promise, queue  (0) 2022.06.20
알고리즘 - 예산, JadenCase문자열 만들기  (0) 2022.06.17
graphql-codegen 설치하기  (0) 2022.06.17
    '프론트엔드✏️/코드캠프' 카테고리의 다른 글
    • 알고리즘 - 실패율, indexOf, lastIndexOf, 배열을 객체처럼!
    • 220620 프론트엔드 부트캠프 41일차 : refreshToken, Graphql은 사실ㅇ0ㅇ
    • 220617 프론트엔드 부트캠프 38일차: 카카오맵, SPA, MPA, callback-hell, promise, queue
    • 알고리즘 - 예산, JadenCase문자열 만들기
    당근먹는하니
    당근먹는하니

    티스토리툴바