지도/로컬 API에 대한 문의게시판입니다.
useEffect(() => {
var mapContainer = document.getElementById(‘myMap’), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
const ps = new kakao.maps.services.Places();
ps.keywordSearch(searchPlace, placesSearchCB);
// 지도를 클릭한 위치에 표출할 마커입니다
var marker = new kakao.maps.Marker({
// 지도 중심좌표에 마커를 생성합니다
position: map.getCenter()
});
// 지도에 마커를 표시합니다
marker.setMap(map);
// 지도에 클릭 이벤트를 등록합니다
// 지도를 클릭하면 마지막 파라미터로 넘어온 함수를 호출합니다
kakao.maps.event.addListener(map, 'click', function(mouseEvent) {
// 클릭한 위도, 경도 정보를 가져옵니다
var latlng = mouseEvent.latLng;
// 마커 위치를 클릭한 위치로 옮깁니다
marker.setPosition(latlng);
// var message = '클릭한 위치의 위도는 ' + latlng.getLat() + ' 이고, ';
// message += '경도는 ' + latlng.getLng() + ' 입니다';
// var resultDiv = document.getElementById('clickLatlng');
console.log(latlng)
// resultDiv.innerHTML = message;
});
function placesSearchCB(data, status, pagination) {
if (status === kakao.maps.services.Status.OK) {
let 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),
clickable: true
});
console.log(place)
console.log(searchPlace)
console.log(marker.position)
}
kakao.maps.event.addListener(marker, 'click', function(mouseEvent) {
// 클릭한 위도, 경도 정보를 가져옵니다
var latlng = mouseEvent.latLng;
// 마커 위치를 클릭한 위치로 옮깁니다
console.log(latlng)
});
}, [searchPlace]);
이런식으로 사용하는것이 아닌가요?
kakaoMap.jsx:64 Uncaught TypeError: Cannot read property ‘latLng’ of undefined
이러한 오류가 뜨네요 ㅜㅜ
추가적으로 검색어 입력을 하지 않을 시
services.js:5 GET http://dapi.kakao.com/v2/local/search/keyword.json?query=&page=1&size=15 400 (Bad Request)
이러한 오류도 뜹니다 useEffect를 사용해서 그런가요?