안녕하세요 여러개의 마커 관련 문의드립니다.
마커를 여러개 찍기 위해서
animals.map((animal) => {
// 마커 이미지의 이미지 크기 입니다
var imageSize = new kakao.maps.Size(24, 35);
// 마커 이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
// 마커를 생성할 때 필요한 position 을 미리 설정해놓습니다
var latlng = new kakao.maps.LatLng(animal.latitude, animal.longtitude);
// 마커를 생성합니다 -> 백과 연결 필요!
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: latlng, // 마커를 표시할 위치
title: animal.title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image: markerImage, // 마커 이미지
});
console.log(marker);
// 마커에 표시할 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: animal.name, // 인포윈도우에 표시할 내용
});
// 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
// 이벤트 리스너로는 클로저를 만들어 등록합니다
// for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
kakao.maps.event.addListener(
marker,
"mouseover",
makeOverListener(map, marker, infowindow)
);
kakao.maps.event.addListener(
marker,
"mouseout",
makeOutListener(infowindow)
);
kakao.maps.event.addListener(marker, "click", function navi() {
navigate("/discover", {
state: {
id,
name,
image,
sick,
trash,
target,
sill,
description,
},
});
});
});
이런식으로 추가를 해주었습니다.
어떤 오류인지 모르겠는데 새로고침하면 마커는 없고
코드를 오류가 나게 수정하고 저장을 하였다가 다시 원래대로 저장을 하면 마커가 생성되어 있습니다.
거기서 다시 새로고침을 하면 여러가지 찍어두었던 마커가 없어집니다. . . 어떤 오류인지 ㅠㅠ
마커에서 클릭이벤트로 데이터로 넘겨 다음 페이지에 데이터를 사용하고 싶은데 그 부분에서도 id가 넘어오지 않습니다…
[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610