지도 API를 이용해서 상세 지도를 불러오고 싶은데 자꾸 이상한 지역을 불러옵니다

Question

안녕하세요, 최근에 지역별 맛집과 관광지를 찾아주는 웹사이트를 GPT를 사용해서 만들고 있습니다.처음 화면에는 한국의 지도를 보여주면서 각 광역시나 구 마다 커서가 있고, 그 커서를 누르면 해당 지역으로 확대되는 방식으로 사이트를 만들고 있습니다. 여기서 자꾸 문제가 생기는데, 분명 세부 지역에 대해서 같은 방식으로 코드를 작성했는데 일부 지역은 제대로 확대가 되지만, 일부지역은 해당 지역이 아닌 다른 위치로 지도가 확대 됩니다. 서울 같은 경우는 문의면이라는 이상한 곳으로 지도가 확대가 되는데 왜 이런 오류가 발생하는지 모르겠습니다. 초기 위치 설정이나 함수들도 제대로 작성했다고 생각하는데 어디가 문제여서 이런 오류가 발생하는지 궁금해서 질문드립니다.초기 화면에 대한 코드document.addEventListener('DOMContentLoaded', function () {var mapOptions = {center: new naver.maps.LatLng(36.5, 127.5),zoom: 7};var map = new naver.maps.Map('map', mapOptions);var initialCenter = mapOptions.center;var initialZoom = mapOptions.zoom;var cityMarkers = [];var regionMarkers = {seoul: [],busan: [],daegu: [],incheon: [],gwangju: [],daejeon: [],ulsan: [],gyeonggi: [],gangwon: [],chungbuk: [],chungnam: [],jeonbuk: [],jeonnam: [],gyeongbuk: [],gyeongnam: [],jeju: []};var cityCoords = [{ name: "서울", lat: 37.5665, lng: 126.9780, zoom: 12, detailMap: "seoul.js" },{ name: "부산", lat: 35.1796, lng: 129.0756, zoom: 12, detailMap: "busan.js" },{ name: "대구", lat: 35.8714, lng: 128.6014, zoom: 12, detailMap: "daegu.js" },{ name: "인천", lat: 37.4563, lng: 126.7052, zoom: 12, detailMap: "incheon.js" },{ name: "광주", lat: 35.1595, lng: 126.8526, zoom: 12, detailMap: "gwangju.js" },{ name: "대전", lat: 36.3504, lng: 127.3845, zoom: 12, detailMap: "daejeon.js" },{ name: "울산", lat: 35.5384, lng: 129.3114, zoom: 12, detailMap: "ulsan.js" },{ name: "경기도", lat: 37.2752, lng: 127.0095, zoom: 12, detailMap: "gyeonggi.js" },{ name: "강원도", lat: 37.8667, lng: 127.7200, zoom: 12, detailMap: "gangwon.js" },{ name: "충청북도", lat: 36.7378, lng: 127.4917, zoom: 12, detailMap: "chungcheongbukdo.js" },{ name: "충청남도", lat: 36.5296, lng: 126.8590, zoom: 12, detailMap: "chungcheongnamdo.js" },{ name: "전라북도", lat: 35.8218, lng: 127.1480, zoom: 12, detailMap: "jeollabukdo.js" },{ name: "전라남도", lat: 34.8161, lng: 126.4629, zoom: 12, detailMap: "jeollanamdo.js" },{ name: "경상북도", lat: 36.5760, lng: 128.5057, zoom: 12, detailMap: "gyeongsangbukdo.js" },{ name: "경상남도", lat: 35.2373, lng: 128.6925, zoom: 12, detailMap: "gyeongsangnamdo.js" },{ name: "제주도", lat: 33.4996, lng: 126.5312, zoom: 12, detailMap: "jeju.js" }];initializeMap(cityCoords, map, cityMarkers);setMapEventListeners(map, regionMarkers);setCursorStyleOnLoad();setBackButtonFunctionality(map, initialCenter, initialZoom, regionMarkers, cityMarkers);hideInfoPanelOnClick(map);});function initializeMap(cityCoords, map, cityMarkers) {cityCoords.forEach(function(city) {var marker = new naver.maps.Marker({position: new naver.maps.LatLng(city.lat, city.lng),map: map,title: city.name,zIndex: 10});cityMarkers.push(marker);naver.maps.Event.addListener(marker, 'click', function() {map.panTo(marker.getPosition());map.setZoom(city.zoom || 10);if (city.detailMap) {loadDetailMap(city.detailMap);}});});}function loadDetailMap(scriptSrc) {var script = document.createElement('script');script.src = scriptSrc;script.onload = function() {console.log("Detail map script loaded successfully.");};script.onerror = function() {console.error("Failed to load detail map script.");};document.head.appendChild(script);}function setMapEventListeners(map, regionMarkers) {naver.maps.Event.addListener(map, 'zoom_changed', function() {var currentZoom = map.getZoom();Object.keys(regionMarkers).forEach(region => {regionMarkers[region].forEach(marker => marker.setMap(currentZoom >= 12 ? map : null));});});}function setCursorStyleOnLoad() {window.onload = function() {var mapElement = document.getElementById('map');if (mapElement) {mapElement.style.cursor = 'default';} else {console.error("'map' element not found.");}};}function setBackButtonFunctionality(map, initialCenter, initialZoom, regionMarkers, cityMarkers) {document.getElementById('backButton').addEventListener('click', function() {map.panTo(initialCenter);map.setZoom(initialZoom);Object.keys(regionMarkers).forEach(region => {regionMarkers[region].forEach(marker => marker.setMap(null));});cityMarkers.forEach(marker => marker.setMap(map));document.getElementById('infoPanel').innerHTML = '';document.getElementById('infoPanel').style.display = 'none';});}function hideInfoPanelOnClick(map) {naver.maps.Event.addListener(map, 'click', function() {var infoPanel = document.getElementById('infoPanel');if (infoPanel.style.display === 'block') {infoPanel.style.display = 'none';}});}function performSearch() {var query = document.getElementById('searchInput').value;// Implement search functionality here}function showDistrictInfo(districtName) {var infoPanel = document.getElementById('infoPanel');var content = '

' + districtName + '

Restaurants

Attractions

';infoPanel.innerHTML = content;infoPanel.style.display = 'block';console.log("Displayed info for district: ", districtName);}서울 지역에 대한 코드document.addEventListener('DOMContentLoaded', function () {var mapOptions = {center: new naver.maps.LatLng(37.5665, 126.9780),zoom: 10};var map = new naver.maps.Map('map', mapOptions);var SeoulDistricts = [{ name: "종로구", lat: 37.5735, lng: 126.9790 },{ name: "중구", lat: 37.5636, lng: 126.9976 },{ name: "용산구", lat: 37.5326, lng: 126.9901 },{ name: "성동구", lat: 37.5633, lng: 127.0366 },{ name: "광진구", lat: 37.5384, lng: 127.0822 },{ name: "동대문구", lat: 37.5743, lng: 127.0390 },{ name: "중랑구", lat: 37.6063, lng: 127.0928 },{ name: "성북구", lat: 37.5894, lng: 127.0164 },{ name: "강북구", lat: 37.6396, lng: 127.0255 },{ name: "도봉구", lat: 37.6688, lng: 127.0467 },{ name: "노원구", lat: 37.6543, lng: 127.0568 },{ name: "은평구", lat: 37.6176, lng: 126.9270 },{ name: "서대문구", lat: 37.5790, lng: 126.9368 },{ name: "마포구", lat: 37.5663, lng: 126.9013 },{ name: "양천구", lat: 37.5271, lng: 126.8562 },{ name: "강서구", lat: 37.5509, lng: 126.8495 },{ name: "구로구", lat: 37.4955, lng: 126.8876 },{ name: "금천구", lat: 37.4569, lng: 126.8957 },{ name: "영등포구", lat: 37.5260, lng: 126.8963 },{ name: "동작구", lat: 37.5124, lng: 126.9393 },{ name: "관악구", lat: 37.4783, lng: 126.9516 },{ name: "서초구", lat: 37.4835, lng: 127.0326 },{ name: "강남구", lat: 37.5172, lng: 127.0473 },{ name: "송파구", lat: 37.5146, lng: 127.1066 },{ name: "강동구", lat: 37.5301, lng: 127.1237 }];var SeoulDistrictMarkers = [];function addSeoulDistrictMarkers(coords) {coords.forEach(function (district) {var marker = new naver.maps.Marker({position: new naver.maps.LatLng(district.lat, district.lng),map: map,title: district.name,zIndex: 10});SeoulDistrictMarkers.push(marker);naver.maps.Event.addListener(marker, 'click', function () {console.log("Clicked district:", district.name, "Coordinates:", district.lat, district.lng); // Debuggingmap.setCenter(new naver.maps.LatLng(district.lat, district.lng));map.setZoom(14);showDistrictInfo(district.name);});});}addSeoulDistrictMarkers(SeoulDistricts);function showDistrictInfo(districtName) {var infoPanel = document.getElementById('infoPanel');var content =

${districtName}

;var restaurants = getRestaurants(districtName);var touristSpots = getTouristSpots(districtName);content += '

Restaurants

${restaurant}

';content += '

Tourist Spots

${spot}

';infoPanel.innerHTML = content;infoPanel.style.display = 'block';}function getRestaurants(districtName) {return ["Restaurant A", "Restaurant B", "Restaurant C"];}function getTouristSpots(districtName) {return ["Tourist Spot A", "Tourist Spot B", "Tourist Spot C"];}naver.maps.Event.addListener(map, 'click', function () {var infoPanel = document.getElementById('infoPanel');infoPanel.style.display = 'none';console.log("Hiding info panel"); // Debugging});document.getElementById('backButton').addEventListener('click', function () {window.location.href = 'index.html';});});

카르단테 · Answer

var mapOptions = {center: new naver.maps.LatLng(36.5, 127.5),zoom: 7};이 코드가 초기 위치를 문의면으로 잡는 것 같은데...초기값을 다른 값으로 설정해야 될 것 같네요...

ZERO개발자 · Answer

1.가르키는 좌표를 콘솔에 찍어본다 &#61;> 문의면[36.5, 127.5]2.해당 좌표가 소스에 있는지 검색 &#61;> 있네요var mapOptions &#61; {center: new naver.maps.LatLng(36.5, 127.5),zoom: 7};3.그렇다면 이벤트 처리하느 곳이나 특정 서비스 함수 안에서 mapOptions 초기값으로 다시 가져오는곳이 있겠죠?

지도 API를 이용해서 상세 지도를 불러오고 싶은데 자꾸 이상한 지역을 불러옵니다

2개의 답변

Q&A 목록