ReactNative에서 카카오 맵 api 사용법을 찾아 헤맸었는데 못찾았습니다.
그래서 WebView 이용한 방식으로 해결했습니다.
kakao map api - web 공식 문서 참고
https://apis.map.kakao.com/web/
appkey 값의 경우, JavaScript 키 가져오기
https://developers.kakao.com/
처음에는 아래처럼 KakaoMaps 컴포넌트 설정해두고, props 값으로 marker 변수를 넘겼었는데, 값이 바뀔 때마다 지도가 다시 그려지는 문제가 있었습니다.
그래서 찾은 해결 방법이 useRef 이용해 스크립트 코드를 삽입하는 방식을 사용했습니다.
export const KakaoMaps = () => {
return `
<!DOCTYPE html>
<html lang="en">
<head>
...
<script
type="text/javascript"
src="https://dapi.kakao.com/v2/maps/sdk.js?appkey={JavaScript 키}"
></script>
...
</head>
<body>
<div id="map"></div>
<script>
// 마커 이미지들
var imageSrc = "https://i.ibb.co/.../marker-blue.png";
var imageSrcT = "https://i.ibb.co/.../marker-red.png";
var imageSrcF = "https://i.ibb.co/.../marker-black.png";
var imageSize = new kakao.maps.Size(25.33, 25.33);
var myMarkers = []
function addMyMarker(position, title, image) {
...
}
function setMyMarkers(map) {
...
}
function panTo(position, title, image) {
...
}
// 마커 추가하기
let markers = [];
let redMarkers = [];
function addMarker(id, name, position, isMarked) {
...
}
// 모든 마커 보이게
function setMarkers(map) {
...
}
// 빨간 마커 보이게
function setRedMarkers(map) {
...
}
// map 초기화면 보여주기
const mapContainer = document.getElementById("map");
</script>
</body>
</html>
`;
};공통 함수는 스크립트 코드 내에 넣었습니다.
addMyMarker 함수: 현재 위치 마커 생성하는 함수
setMyMarkers 함수: 이전 위치 마커 없애는 함수
setMarkers 함수: 검색된 장소 마커 찍어주는 함수
setRedMarkers 함수: 저장한 장소 마커 찍어주는 함수
panTo 함수: 현재 위치나 검색한 위치로 이동하는 함수
import React, {useState, useEffect, useRef} from 'react';
...
export default function WebViewMaps({}: any): JSX.Element {
...
/* web -> rn */
const onMessage = (e: any) => {...};
/* rn -> web */
useEffect(() => {
if (modalSearch.cnt === 0 && modalSearch.where === '') {
console.log('WebViewMaps start');
setTimeout(() => {
webviewRef.current.injectJavaScript(
`
const mapOption = {
center: new kakao.maps.LatLng(${modalSearch.currentLoc[0]}, ${modalSearch.currentLoc[1]}),
level: 3, // 4 7 10
};
const map = new kakao.maps.Map(mapContainer, mapOption);
panTo(
[${modalSearch.currentLoc[0]}, ${modalSearch.currentLoc[1]}],
"myLocation",
new kakao.maps.MarkerImage(imageSrc, new kakao.maps.Size(22, 22))
)
` +
markersFn(modalSearch.res) +
`
`,
);
setLoading(false);
}, 900);
} else if (modalSearch.cnt === 0 && modalSearch.where === 'Modal') {...}
}, [modalSearch.currentLoc, modalSearch.searchLoc, modalSearch.res]);
useEffect(() => {...}, [modalSearch.myLoc]);
useEffect(() => {...}, [modalSearch.bookmark]);
return (
<WebView
ref={webviewRef}
javaScriptEnabled={true}
source={{
html: KakaoMaps(),
}}
onError={errorHandler}
onMessage={onMessage}
/>
);
}공통적으로 사용되는 함수들은 KakaoMaps 컴포넌트 내 스크립트 코드로 고정해두고, 이를 이용해 WebviewMaps 컴포넌트에서 marker를 그려내는 스크립트 코드를 넣어줍니다.
내가 만들 웹앱들 제작 과정 적는 곳