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
'프론트엔드✏️ > 코드캠프' 카테고리의 다른 글
| 알고리즘 - 실패율, 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 |