지도/로컬 API에 대한 문의게시판입니다.
import React, { useEffect, useRef } from "react";
import styled from "styled-components";
const { kakao } = window;
const KakaoMap = ({ positions }) => {
const mapContainer = useRef();
const getGeoCode = async (list) => {
let geocoder = new kakao.maps.services.Geocoder();
list.forEach((item) => {
geocoder.addressSearch(item.address, (result, status) => {
if (status === kakao.maps.services.Status.OK)
item.address = new kakao.maps.LatLng(result[0].y, result[0].x);
});
});
return list;
};
const resetBounds = async (list, bounds) => {
list.forEach((item) => {
bounds.extend(item.address);
});
return bounds;
};
useEffect(() => {
kakao.maps.load(async () => {
console.log("useEffect1");
const container = mapContainer.current;
let options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
};
//맵생성
let map = new kakao.maps.Map(container, options);
//좌표값 변환
let coords = await getGeoCode(positions);
//범위(bounds) 설정
let bounds = await new kakao.maps.LatLngBounds();
bounds = await resetBounds(coords, bounds, map);
//마커 찍기
coords.forEach((item) => {
new kakao.maps.Marker({
position: item.address,
map: map,
});
});
//생성된 지도에 범위 적용
map.setBounds(bounds);
});
}, []);
return <MapContainer ref={mapContainer}></MapContainer>;
};
const MapContainer = styled.div`
width: 100%;
height: 100%;
`;
export default KakaoMap;
카카오 지도 api를 사용해서 지도내에
positions에 담긴 주소값(string)에 마커를 찍고 찍은 범위 전체를 보여주도록 setBounds를 사용하고 있습니다.
그런데 항상 처음 렌더링이 될 경우에는
kakao.js:103 Uncaught (in promise) TypeError: a.e is not a function
** at ga.c.extend (kakao.js:103)**
** at KakaoMap.js:24**
** at Array.forEach ()**
** at resetBounds (KakaoMap.js:23)**
** at KakaoMap.js:43**
해당 에러를 발생시키고, 그 후 다시 렌더될 경우는 정상적으로 나타나게 됩니다.
어느 부분이 문제가 되는건지 알고 싶습니다.
첫화면
재렌더링 후 화면
