[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610
안녕하세요
마커를 클릭하면 나오는 닫기가 가능한 커스텀 오버레이를 만들었는데요 클릭하면 그거 하나만 나왔으면 하는데 전체가 다 나오고 있어요 어떻게 해야하면 좋을지 해서 문의 남겨봅니다 ,
<map 태그가 있는 파일>
import React, { useEffect, useState } from ‘react’;
import axios from ‘axios’;
import { Map, MarkerClusterer } from ‘react-kakao-maps-sdk’;
import ‘./MyMap.scss’;
import MapMarkers from ‘./Mapmarkers’;
import Detail from ‘./Detail’;
import { useRef } from ‘react’;
const { kakao } = window;
const MyMap = () => {
const [state, setState] = useState({
center: { lat: 36.2683, lng: 127.6358 },
isPanto: true,
});
const [searchAddress, setSearchAddress] = useState();
const SearchMap = () => {
const places = new kakao.maps.services.Places();
let placesSearch = function (data, status, pagination) {
if (status === kakao.maps.services.Status.OK) {
const newSearch = data[0];
setState({
center: { lat: newSearch.y, lng: newSearch.x },
});
} else {
console.log(‘위치를 찾을 수 없습니다’);
}
};
places.keywordSearch(${searchAddress}, placesSearch);
};
const handleSearchAddress = (e) => {
setSearchAddress(e.target.value);
};
const mapRef = useRef();
const onClusterclick = (_target, cluster) => {
const map = mapRef.current;
const level = map.getLevel() - 1;
map.setLevel(level, { anchor: cluster.getCenter() });
};
let [locations, setLocations] = useState([]);
useEffect(() => {
axios
.get(
‘http://api.kcisa.kr/openapi/service/rest/convergence2019/getConver11?serviceKey=51a64879-1354-44fe-a738-c8a05f7559d1&numOfRows=50’,
)
.then((result) => {
locations = result.data.response.body.items.item;
setLocations(locations);
})
.catch((error) => {
console.log(axios get 에러 발생 ${error});
});
}, []);
return (
);
};
export default MyMap;
<MapMarker 가 있는 파일>
// 이름 title / 공영민영 state / 주소 spatial / 번호 x / 운영시간 time / 요금 charge
// 주차면수 extent / 특이사항 description
// 위치 relation 위도, 경도: …, …
import React from ‘react’;
import { useState } from ‘react’;
import { CustomOverlayMap, MapMarker } from ‘react-kakao-maps-sdk’;
import Detail from ‘./Detail’;
const MapMarkers = ({ locations }) => {
const positions = locations.map((item, idx) => {
// 위도, 경도: 36.24104363, 127.0664824
const returnObj = {};
const relation = item.relation;
const split = relation.split(’ ‘);
const split2 = split[2].split(’,’);
const lats = split2[0];
const lngs = split[3];
const title = item.title;
const state = item.state;
const charge = item.charge;
const extent = item.extent;
let time = item.time.replace(
‘평일운영시간: 0:00~0:00 | 토요일운영시간: 0:00~0:00 | 공휴일운영시간: 0:00~0:00’,
‘24시간 영업’,
);
returnObj['lat'] = lats;
returnObj['lng'] = lngs;
returnObj['title'] = title;
returnObj['state'] = state;
returnObj['charge'] = charge;
returnObj['extent'] = extent;
returnObj['time'] = time;
return returnObj;
});
const [isOpen, setIsOpen] = useState(false);
return (
<>
{positions.map((location, idx) => {
return (
<div key={idx}>
<MapMarker
position={location}
image={{
src: '/img/Parkinglot_sign.svg',
size: {
width: 35,
height: 46,
},
}}
title={location.title}
onClick={() => setIsOpen(true)}
/>
{isOpen && (
<CustomOverlayMap position={location}>
<div
width="14"
height="13"
style={{
position: 'absolute',
right: '10px',
top: '10px',
cursor: 'pointer',
}}
onClick={() => setIsOpen(false)}
>
<img src="/img/xmark.svg" alt="x" />
</div>
<div className="detail">
<div className="detail-line"></div>
<div className="detail-title">
<h3>{location.title}</h3>
<h5>{location.state} 주차장</h5>
</div>
<div className="detail-info">
<p>
<img src="./img/info1.svg" alt="" />
경기 수원시 팔달구 매산로 31
</p>
<p>
지번 | 경기 수원시 팔달구 매산로2가
35-4
</p>
<p style={{ overflow: 'scroll' }}>
<img src="./img/info2.svg" alt="" />
{location.time}
</p>
<p>
<img src="./img/info3.svg" alt="" />
연중무휴
</p>
<p>
<img src="./img/info4.svg" alt="" />
{location.charge}
</p>
</div>
<div className="line"></div>
<div className="detail-more">
<h6>부가정보</h6>
<ul>
<li>- {location.extent}</li>
<li>- 노외</li>
</ul>
</div>
</div>
</CustomOverlayMap>
)}
</div>
);
}, [])}
</>
);
};
export default MapMarkers;