수업시간 내용을 기반으로 작성되었습니다.
<body>
<!-- 지도를 표시할 div 입니다 -->
<div id="map" style="width:100%;height:350px;"></div>
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=617f8f5087f960a1ea77024f970d711c"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao
.maps
.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
"a_201705111713?page=1&perPage=10&serviceKey=COog2VpGwoKjJbuLbsotfPe9FOvhuC5Ax5" +
"OLcRW2sAPnLle8ggr2h8GA%2B977YsNjZZzkz4vKnJOzvcAqqbfBUA%3D%3D";
//공공데이터 포털에서 api 키 받은 후에 사용하는 open APi
$.getJSON(url, function (data) {
for (let i = 0; i < data.currentCount; i++) {
let txt = "<tr><td>" + data
.data[i]
.번호 + "</td><td>" + data
.data[i]
.명칭 + "</td><td>" + data
.data[i]
.소재지 + "</td><td>" + data
.data[i]
.전화번호 + "</td></tr>";
$("table").append(txt);
}
})
//제이슨 형태로 받은 data를 화면에 테이블 형태로 출력하기 위한 함수
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var map = new KaKao
.maps
.Map(mapContainer, mapOption);
</script>
</body>
'HTML,CSS,JavaScript' 카테고리의 다른 글
| 자바스크립트 ] 주소로 카카오 맵 api 장소 표시하기(좌표 얻기) (0) | 2022.06.28 |
|---|---|
| 자바스크립트로 날씨 구현하기 복습 (0) | 2022.06.27 |
| 자바스크립트로 맵 구현하기 복습 (0) | 2022.06.27 |
| 자바스크립트로 계산기 구현하기 복습 (0) | 2022.06.25 |
| 자바스크립트로 풍선 애니메이션 구현하기 복습 (0) | 2022.06.25 |
댓글