/*global kakao */
import React, {useEffect} from “react”;
export default function Map() {
useEffect(() => {
mapscript();
}, []);
const mapscript = () => {
let mapContainer = document.getElementById("map");
let options = {
center: new kakao
.maps
.LatLng(37.5704163, 126.983138),
level: 3
};
//map
const map = new kakao
.maps
.Map(mapContainer, options);
//장소 검색 객체를 생성합니다.
const ps = new kakao
.maps
.services
.Places();
ps.keywordSearch('종로2가 카페', placesSearchCB);
ps.keywordSearch('종각역 카페', placesSearchCB);
// 키워드 검색 완료 시 호출되는 콜백함수 입니다
function placesSearchCB(data, status, pagination) {
if (status === kakao.maps.services.Status.OK) {
// 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해 LatLngBounds 객체에 좌표를 추가합니다
var bounds = new kakao
.maps
.LatLngBounds();
for (let i = 0; i < data.length; i++) {
displayMarker(data[i]);
bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
}
// 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
map.setBounds(bounds);
}
}
function displayMarker(place) {
// 마커를 생성하고 지도에 표시합니다
let marker = new kakao
.maps
.Marker({
map: map,
position: new kakao
.maps
.LatLng(place.y, place.x)
});
let infowindow = kakao
.mpas
.event
.addListener(marker, 'click', function () {
infowindow.setContent(
'<div style="padding:5px;font-size:12px;">' + place.place_name + '</div>'
);
infowindow.open(map, marker)
});
}
}
return <div id="map" style={{width: "100vw", height: "80vh"}}></div>;
}
react로 카페 마커 표시와 윈포윈도우를 통해서 출력은 했는데
랜덤으로 데이터값을 받아서 숫자에 따라 마커를 변경하고 싶습니다.
그런데 어디에 코드를 추가해야할지 도통 감이 잡히지 않습니다.
어드바이스 부탁드리겠습니다. ㅠ