2024-02-28(55일차) - Spring

민짱·2024년 2월 28일

[산대특] 프롬프트AI & OpenAPI & 공공데이터를 활용한 웹앱개발자 양성과정

목록 보기

52/85

📅2024. 02.28 55일차

API 적용

내가 찾은 API 정보에선 API Key는 없었으며 URL만 있었음. 내가 사용하려던 코드는 API Key를 입력하는 부분이 있었는데, 그냥 API Key 입력하는 부분은 주석처리하고 url만 입력했다.

async function getData2() {
  
			const API_KEY = '발급받은 API 키'; //  API 키가 없어서 주석처리 함
 
			const url = 'URL';
			const response = await fetch(url);
			const data = await response.json();

내가 하고 싶었던건 링크 클릭하면 지도를 이동시키고, 해당 장소에 마커가 표시되는 것이었는데,
분명 콘솔에 배열안에 값(데이터)도 잘 찍히고 위도와 경도도 잘 찍혔음.
위도와 경도를 숫자값 자체로 입력하면 마커가 잘 찍히지만 위도와 경도를 전역변수에 담아 사용하면
마커가 사라진다! 하지만 원하는 장소로 이동은 가능! ㅠㅠ

var markerPosition  = new kakao.maps.LatLng(lat, lon); // 변수로 집어 넣으면 안나와..
	var markerPosition  = new kakao.maps.LatLng(36.34919313, 127.3955023); //이놈이 문제!!!

카카오 라이브러리로 들어가보니 LatLng(lat, lon) 위도와 경도는 Number형식이어야지 된다고 적혀있음. 그럼 내가 가져온 데이터는 보이는건 숫자로 보이는거지만 실제로 String일 수도 있어서 문제가 생긴건가?

문제가 도무지 해결되지 않아 잠깐의 GPT사용

ChatGPT의 대답
하지만, getData2() 함수의 완료를 기다리지 않고 지도 및 마커를 생성하고 있습니다.
제공하신 코드를 살펴본 결과, 문제의 원인이 될 수 있는 몇 가지 사항을 발견했습니다:

비동기 데이터 로딩: getData2() 함수가 비동기적으로 데이터를 로딩하고 있으며, lat와 lon 변수는 이 함수가 완료된 후에야 값을 가집니다. 하지만, getData2() 함수의 완료를 기다리지 않고 지도 및 마커를 생성하고 있습니다. 이로 인해 lat와 lon이 undefined 상태에서 kakao.maps.LatLng 객체를 생성하게 되어, 마커가 제대로 표시되지 않을 수 있습니다.
마커 및 지도 중심 설정: getData2() 함수에서 받아온 위도와 경도로 지도의 중심을 설정하거나 마커를 생성하려면, 이 작업들을 getData2() 함수 내부 또는 해당 함수가 완료된 이후에 수행해야 합니다.

이를 해결하기 위한 코드 수정 예시는 다음과 같습니다

<script>
   async function getData2() {
      const API_KEY = '발급받은 API 키';
      const url = 'URL';
      const response = await fetch(url);
      const data = await response.json();

      // 여기에서 lat과 lon을 설정
      lat = data.response.body.items[0].item.latitude;
      lon = data.response.body.items[0].item.longitude;

      // 지도 중심과 마커 위치를 업데이트
      var moveLatLon = new kakao.maps.LatLng(lat, lon);
      map.setCenter(moveLatLon);

      // 마커 생성 및 표시
      var marker = new kakao.maps.Marker({
          position: moveLatLon
      });
      marker.setMap(map);
   }

   // 카카오지도 기본 설정 및 생성
   var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
   mapOption = {
      center: new kakao.maps.LatLng(33.450701, 126.570667), // 기본 중심좌표 설정
      level: 3 // 지도의 확대 레벨
   };
   var map = new kakao.maps.Map(mapContainer, mapOption);

   // 데이터 로딩 및 지도 업데이트 함수 호출
   getData2();
</script>

위의 수정된 코드는 getData2() 함수가 완료된 후에 지도의 중심을 업데이트하고 마커를 생성하도록 변경합니다. 이렇게 하면 lat와 lon 변수가 정의된 후에 지도 관련 작업이 수행되므로, 마커가 정상적으로 표시될 것입니다.

해결

<body>
	<div id="map" style="width: 100%; height: 350px;"></div>

	<p>
		<button onclick="setCenter()">지도 중심좌표 이동시키기</button>
		<button onclick="panTo()">지도 중심좌표 대전으로 이동시키기</button>
	</p>

	<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=APPKEY입력"></script>
	<script>
	var lat;
	var lon;
		async function getData2() {
			//const API_KEY = '발급받은 API 키';
			const url = 'URL입력';
			const response = await fetch(url);
			const data = await response.json();

			// 여기에서 lat과 lon을 설정
			lat = data.response.body.items[10].la;
			lon = data.response.body.items[10].lo;

			console.log(lat);
			console.log(lon);

			// 지도 중심과 마커 위치를 업데이트
			var moveLatLon = new kakao.maps.LatLng(lat, lon);
			map.setCenter(moveLatLon);

			// 마커 생성 및 표시
			var marker = new kakao.maps.Marker({
				position : moveLatLon
			});
			marker.setMap(map);
		}

		// 카카오지도 기본 설정 및 생성
		var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
		mapOption = {
			center : new kakao.maps.LatLng(33.450701, 126.570667), // 기본 중심좌표 설정
			level : 3
		// 지도의 확대 레벨
		};
		var map = new kakao.maps.Map(mapContainer, mapOption);
		
		function setCenter() {
			// 이동할 위도 경도 위치를 생성합니다 
			var moveLatLon = new kakao.maps.LatLng(33.452613, 126.570888);

			// 지도 중심을 이동 시킵니다
			map.setCenter(moveLatLon);
		}

		function panTo() {
			// 이동할 위도 경도 위치를 생성합니다 
			var moveLatLon = new kakao.maps.LatLng(lat, lon);

			// 지도 중심을 부드럽게 이동시킵니다
			// 만약 이동할 거리가 지도 화면보다 크면 부드러운 효과 없이 이동합니다
			map.panTo(moveLatLon);
		}
		

		// 데이터 로딩 및 지도 업데이트 함수 호출
		getData2();
	</script>

</body>

민짱

이전 포스트

2024-02-27(54일차) - Spring

다음 포스트

2024-02-28(55일차) - Spring

[산대특] 프롬프트AI & OpenAPI & 공공데이터를 활용한 웹앱개발자 양성과정

API 적용

문제가 도무지 해결되지 않아 잠깐의 GPT사용

해결

2024-02-27(54일차) - Spring

2024-03-20 69일차 React

0개의 댓글