저는 리액트로 다중마커를 출력하면서 다중 마커의 이미지를 커스텀으로 변경시키는 작업을 하고있습니다.
예제를 따라가던 도중 MarkerImage를 불러오지 못한다고 자꾸 에러가 나는데, 여러가지 글을 참고하여 forEach로 바꿔도 보고 했는데 왜 안되는 걸까요 ㅠㅠ…?
화면이 하얗게 나옴과 동시에 에러문구가 뜹니다.
답변 부탁드립니다!’’’
에러문구입니다MapContainer.tsx:60 Uncaught TypeError: Cannot read properties of undefined (reading 'MarkerImage')
at MapContainer.tsx:60:1
at commitHookEffectListMount (react-dom.development.js:23150:1)
at commitPassiveMountOnFiber (react-dom.development.js:24926:1)
at commitPassiveMountEffects_complete (react-dom.development.js:24891:1)
at commitPassiveMountEffects_begin (react-dom.development.js:24878:1)
at commitPassiveMountEffects (react-dom.development.js:24866:1)
at flushPassiveEffectsImpl (react-dom.development.js:27039:1)
at flushPassiveEffects (react-dom.development.js:26984:1)
at react-dom.development.js:26769:1
at workLoop (scheduler.development.js:266:1)
코드입니다 ***친 부분이 문제입니당…
/* eslint-disable @typescript-eslint/no-unused-vars */
/* global kakao */
import React, { useEffect } from "react"
import { JsxElement } from "typescript"
import Face from "@mui/icons-material"
import KakaoComponent from "./KakaoComponent"
declare global {
interface Window {
kakao: any
}
}
export interface MapProps {
title: string
latlng: any
content: string
}
const SAMPLE_DATA3: MapProps[] = [
{
title: "카카오",
latlng: new window.kakao.maps.LatLng(33.450705, 126.570677),
content: "카카오는 쓰다",
},
{
title: "생태연못",
latlng: new window.kakao.maps.LatLng(33.450936, 126.569477),
content: "물고기에게 양보하세요",
},
{
title: "텃밭",
latlng: new window.kakao.maps.LatLng(33.450879, 126.56994),
content: "고구마 먹고싶어요",
},
{
title: "근린공원",
latlng: new window.kakao.maps.LatLng(33.451393, 126.570738),
content: "공원좋아",
},
]
// {첫번째 데이터를 중심으로 잡기}
const MapContainer: React.FC = () => {
useEffect(() => {
const container = document.getElementById("map")
const options = {
center: SAMPLE_DATA3[0].latlng,
level: 3,
}
const map = new window.kakao.maps.Map(container, options)
// {첫번째 데이터를 중심으로 잡기}
const imgSrc =
"https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png"
const imageSize = new window.kakao.maps.Size(31, 35)
const imageOption = { offset: new window.kakao.maps.Point(16, 34) }
const markerImg = new window.kakao.mpas.MarkerImage(
imgSrc,
imageSize,
imageOption
)
SAMPLE_DATA3.forEach((data) => {
console.log(data)
const marker = new window.kakao.maps.Marker({
position: data.latlng, // 마커를 표시할 위치
title: data.title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image: markerImg,
}).setMap(map)
})
}, [])
return (
<div>
<div id="map" style={{ width: "100%", height: "300px" }} />
</div>
)
}
export default MapContainer```
'''