키워드로 장소 검색하는 사이트인데 Javascript 질문드립니다

Question

검색을 통해 키워드를 기반으로 카카오맵을 보여주는 사이트인데 API KEY를 발급받고 지도까지는 완성했으나 검색 키워드가 지도로 전달이 안되는 거 같습니다...검토를 수차례 해봤지만 도저히 모르겠어서 도움 요청 하고자 합니다...

무한한우주저너머로 · Accepted Answer

<body> <form id="search-form" style="text-align: center"> <input type="text" id="keyword-input" placeholder="키워드를 입력하세요" /> <button type="submit">검색</button> </form> <hr /> <div id="map" style="width: 70%; height: 350px; margin-left: auto; margin-right: auto"></div> <script type="text/javascript" src="</script>" rel="noopener noreferrer nofollow" data-link-auto="">//dapi.kakao.com/v2/maps/sdk.js?appkey=//&libraries=services"></script> <script> document.getElementById("search-form").addEventListener("submit", function (event) { event.preventDefault(); // 폼 제출 방지// 사용자가 입력한 키워드 가져오기var keyword = document.getElementById("keyword-input").value;// Kakao Map API 사용하여 지도 표시var container = document.getElementById("map");var options = {center: new kakao.maps.LatLng(33.5665, 126.978), // 지도의 중심 좌표 설정level: 8, // 지도의 확대 레벨 설정 };var map = new kakao.maps.Map(container, options);// 검색어를 기반으로 장소 검색var places = new kakao.maps.services.Places(); places.keywordSearch(keyword, function (result, status) {if (status === kakao.maps.services.Status.OK) {var bounds = new kakao.maps.LatLngBounds();for (var i = 0; i < result.length; i++) {const point = new kakao.maps.LatLng(result[i].y, result[i].x);let marker = new kakao.maps.Marker({ position: point }); marker.setMap(map); bounds.extend(new kakao.maps.LatLng(result[i].y, result[i].x)); } map.setBounds(bounds);// 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다// 검색 결과를 처리하는 코드 작성// 예를 들어, 결과 마커를 지도에 표시하거나 목록으로 표시할 수 있습니다. } }); });function displayMarker(place) {// 마커를 생성하고 지도에 표시합니다var marker = new kakao.maps.Marker({map: map,position: new kakao.maps.LatLng(place.y, place.x), });// 마커에 클릭이벤트를 등록합니다 kakao.maps.event.addListener(marker, "click", function () {// 마커를 클릭하면 장소명이 인포윈도우에 표출됩니다 infowindow.setContent('<div style="padding:5px;font-size:12px;">' + place.place_name + "</div>"); infowindow.open(map, marker); }); }// 마커를 클릭하면 장소명을 표출할 인포윈도우 입니다var infowindow = new kakao.maps.InfoWindow({ zIndex: 1 });var mapContainer = document.getElementById("map"), // 지도를 표시할 div mapOption = {center: new kakao.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표level: 3, // 지도의 확대 레벨 };// // 지도를 생성합니다// var map = new kakao.maps.Map(mapContainer, mapOption);// // 장소 검색 객체를 생성합니다// var ps = new kakao.maps.services.Places();// // 키워드로 장소를 검색합니다// ps.keywordSearch('부산 아디다스', placesSearchCB);// 키워드 검색 완료 시 호출되는 콜백함수 입니다function placesSearchCB(data, status, pagination) {if (status === kakao.maps.services.Status.OK) {// 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해// LatLngBounds 객체에 좌표를 추가합니다var bounds = new kakao.maps.LatLngBounds();for (var i = 0; i < data.length; i++) {displayMarker(data[i]); bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x)); }// 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다 map.setBounds(bounds); } }// 지도에 마커를 표시하는 함수입니다</script></body>

Clickin · Answer

혹시 개발자 도구 네트워크 탭에서는 API 호출 요청결과가 어떻게 나오던가요?

키워드로 장소 검색하는 사이트인데 Javascript 질문드립니다

2개의 답변

Q&A 목록