응용하던 예제는 https://apis.map.kakao.com/web/sample/multipleMarkerImage/ 이 링크 입니다.
그리고 제 문제와 가장 비슷한 이슈와 해결방법은 아래 같으면서도 다른 것 같아서 질문 드립니다.
https://devtalk.kakao.com/t/api/130873
-
예제와 같이 배열을 직접 만들면 정상적으로 마커가 표시됩니다.
-
그러나 fetch로 불러온 데이터(useState를 사용하여 데이터를 추가하게 함)를 활용하면 마커가 표시되지 않습니다.
진행상황을 알기 위해 콘솔창에 배열을 출력했는데,
콘솔창을 보면 fetch로 데이터를 정상적으로 가져옵니다.
그래서 마커를 작성하는 함수에서 코드를 수정해야할 것 같은데,
도통 무엇이 문제인지 모르겠습니다…
useEffect를 더 만들어야 하는건지…
배열과 코드는 아래와 같습니다.
fetch로 불러오는 데이터
[{"_id":"6594d1e1151d508de8aa61e9","name":"육로","address":"서울 금천구 벚꽃로 298","phone":"070-8888-7403","coord":["126.88384956908195","37.48141708142644"],"info":"http://place.map.kakao.com/681954380","hashtag":[],"twit":[],"__v":0},{"_id":"6594de593dd0b9453ed66380","name":"후발대 잠실직영점","address":"서울 송파구 올림픽로12길 4-23","phone":"02-420-3677","coord":["127.081606214466","37.5110800927465"],"info":"http://place.map.kakao.com/1747047105","hashtag":[],"twit":[],"__v":0}]
코드
import { useEffect, useState } from "react";
const { kakao } = window;
function Map(){
const [positions, setPosition] = useState([]);
const getData = async () => {
const json = await (
await fetch(
`http://localhost:5000/api/list`
)
).json();
json.map((item, index)=>{
const result = {
name: item.name,
address: item.address,
phone: item.phone,
coord: new kakao.maps.LatLng(item.coord[0], item.coord[1]),
info: item.info
};
setPosition((position)=>[...position, result]);
});
}
useEffect(()=>{
getData();
},[]);
console.log(`useState로 생성한 positions: `, positions);
useEffect(() => {
const infowindow = new kakao.maps.InfoWindow({ zIndex: 1 });
const container = document.getElementById("map");
const options = {
center: new kakao.maps.LatLng(37.48141708142644, 126.88384956908195),
level: 14,
}
const map = new kakao.maps.Map(container, options);
// var positions = [
// {
// name: "육로",
// coord: new kakao.maps.LatLng(37.48141708142644, 126.88384956908195)
// },
// {
// name: "후발대 잠실점",
// coord: new kakao.maps.LatLng(37.5110800927465, 127.081606214466)
// }
// ];
// console.log(`직접 생성한 positions: `, positions);
// 마커 이미지의 이미지 주소입니다
var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
for (var i = 0; i < positions.length; i ++) {
// 마커 이미지의 이미지 크기 입니다
var imageSize = new kakao.maps.Size(24, 35);
// 마커 이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
// console.log(`for문에서의 [${i}]번째 positions: `, positions);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].coord, // 마커를 표시할 위치
title : positions[i].name, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image : markerImage // 마커 이미지
});
}
});
return(
<div id="map" style={{
width: "500px",
height:"500px"
}}>
</div>
);
}
export default Map;