안녕하세요
리액트에서 사용중인데요, npm start를 통해 실행을 하면 처음에는 마커가 표시가 안되고 마커부분을 주석처리하고 다시 푼 후에 저장해야 마커가 나타나고 있습니다.
그리고 마커 마우스오버 시에 오버레이를 띄워주고 싶은데 마커의 범위가 작은건지 마우스아웃효과와 섞여서 렌더링이 됩니다.
import React, { useEffect } from 'react';
import './Overlay.css';
const { kakao } = window;
const MapContainer = ({ productInfos }) => {
useEffect(() => {
const container = document.getElementById('myMap');
const options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 10,
};
const map = new kakao.maps.Map(container, options);
const overlayInfos = productInfos?.map(info => {
return {
title: info.name,
lat: info.latitude,
lng: info.longtitude,
img: info.image_url[0],
price: info.price,
region: info.region,
desc: info.description,
};
});
overlayInfos.forEach(el => {
new kakao.maps.Marker({
map: map,
position: new kakao.maps.LatLng(el.lat, el.lng),
title: el.title,
});
let marker = new kakao.maps.Marker({
map: map,
position: new kakao.maps.LatLng(el.lat, el.lng),
title: el.title,
});
let content =
'<div class="overlayWrap">' +
` <img class="overlayImg" src=${el.img}/>` +
' <div class="accommInfoWrap">' +
` <h1 class="accommName">${el.title}</h1>` +
` <p class="accommRegion">${el.region}</p>` +
` <p class="accommDesc">${el.desc}</p>` +
` <p class="accommPrice">${Number(
el.price
).toLocaleString()}</p>` +
' </div>' +
' <div class="overlayArrow">' +
'</div>';
let position = new kakao.maps.LatLng(el.lat, el.lng);
let customOverlay = new kakao.maps.CustomOverlay({
position: position,
content: content,
});
kakao.maps.event.addListener(marker, 'mouseover', function () {
customOverlay.setMap(map);
});
kakao.maps.event.addListener(marker, 'mouseout', function () {
customOverlay.setMap();
});
});
}, []);
return (
<div
id="myMap"
style={{
width: '100%',
height: '100%',
}}
/>
);
};
export default MapContainer;
