[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
리엑트로 지도 구현중입니다.
클릭시 좌표로 주소 생성하는 예시코드 거의 그대로 적었는데 Cannot read properties of null (reading ‘addListener’) 라는 오류가 뜨네요 왜그런걸까요ㅜ
import React from “react”;
import { useEffect, useState, useRef } from “react”;
import MiniBar from “./MiniBar”;
const {kakao}=window;
function Map(){
const container = useRef(null); // 지도를 담을 영역의 DOM 레퍼런스
const [map, setMap] = useState(null); // 지도 인스턴스를 저장할 state
// 지도 초기화
useEffect(() => {
navigator.geolocation.getCurrentPosition((position) => {
const lat = position.coords.latitude, // 위도
lon = position.coords.longitude; // 경도
const locPosition = new window.kakao.maps.LatLng(lat, lon);
});
if (container.current) {
const options = {
center: new window.kakao.maps.LatLng(33.450701, 126.570667),
level: 3,
};
const initialMap = new window.kakao.maps.Map(container.current, options);
setMap(initialMap);
}
}, []); //[container]
// 위치에 마커 생성
const placeMarker = (props) => {
console.log('placeMarker');
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
const lat = position.coords.latitude, // 위도
lon = position.coords.longitude; // 경도
const locPosition = new window.kakao.maps.LatLng(lat, lon);
const marker = new window.kakao.maps.Marker({ position: locPosition });
marker.setMap(map);
map.setCenter(locPosition); // 마커가 위치한 중심으로 이동
});
} else {
alert("현재 위치를 받아오지 못했습니다.");
}
};
{/* 좌표값으로 주소 받아 표시하기 */}
var geocoder = new kakao.maps.services.Geocoder(); //주소-좌표 변환객체
var marker = new kakao.maps.Marker();
var infowindow = new kakao.maps.InfoWindow({zindex:300});
kakao.maps.event.addListener(map,'click',function(mouseEvent){
searchDetailAddrFromCoords(mouseEvent.latLng, function(result,status){
if(status===kakao.maps.services.Status.OK){
var detailAddr=!!result[0].road_address ? result[0].road_address.address_name : '';
detailAddr+= result[0].address.address_name;
marker.setPosition(mouseEvent.latLng);
marker.setMap(map);
infowindow.setContent(detailAddr);
infowindow.open(map, marker);
}
});
});
function searchDetailAddrFromCoords(coords, callback) {
// 좌표로 법정동 상세 주소 정보를 요청합니다
geocoder.coord2Address(coords.getLng(), coords.getLat(), callback);
}
return(
<>
<div ref={container}></div> {/* id='map' */}
<MiniBar placeMarker={placeMarker}/>
</>
);
}
export default Map;