지도를 띄우는 코드 작성
var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표(필수속성).
level: 3 //지도의 레벨(확대, 축소 정도)
};
var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: coords
});
// 인포윈도우로 장소에 대한 설명을 표시합니다
var infowindow = new kakao.maps.InfoWindow({
// (아래에 가게명이 입력되게 해 주세요)
content: '<div style="width:150px;text-align:center;padding:6px 0;">우리회사</div>'
});
infowindow.open(map, marker);
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
}
});
#### 주의사항
- 카카오맵 API는 등록된 도메인 주소에서만 작동합니다.
- 현재 https://127.0.0.1:5500 으로 도메인 등록이 되어있는데 변경이 필요한 분은 알려주세요.
- 카카오맵에 주소 결과가 없는 경우에는 마커가 표시되지 않을 수 있습니다.
<br>
## 기타
#### 템플릿
- 템플릿과, css 파일은 브랜치 sample/mission005에 업로드하였으니 참고하세요.
#### 참고
- 자바스크립트 프론트엔드 프로젝트 가이드 책
- 수업때 추가미션 사항
<br>
## 👨💻 Reviewer Match 👩💻
[코드리뷰 가이드](https://edykim.com/ko/post/code-review-guide/)
### Reviewee
> Reviewer x 3
<br>
### @eastjun
> @YongHoonJJo @s280493 @HoseokNa
<br>
### @YongHoonJJo
> @eastjun @StellaKim1230 @amorfati0310
<br>
### @StellaKim1230
> @YongHoonJJo @ganeodolu @HoseokNa
<br>
### @ganeodolu
> @YongHoonJJo @StellaKim1230 @amorfati0310
<br>
### @s280493
> @eastjun @ganeodolu @amorfati0310
<br>
### @amorfati0310
> @ganeodolu @s280493 @HoseokNa
<br>
### @HoseokNa
> @eastjun @StellaKim1230 @s280493
<br>
미션을 확인하시고 개선이 필요한 부분이 있으면 알려주세요!!
:convenience_store: 가게 찾기
기본 요구사항
1. 메인 화면을 구현합니다.
2. 가게 검색 기능을 구현합니다.
3. 페이지를 구현합니다.
추가 요구사항
1. 검색 히스토리
2. 검색 결과가 느린 경우 처리방법
3. 카카오맵 API를 사용하여 Modal UI로 표시
가게찾기 API 사용방법
가게찾기 API 불러오기
fetch('https://floating-harbor-78336.herokuapp.com/fastfood').then()...예시(판교를 검색하고, 페이지당 10개목록을 표시할 때 1페이지 목록보기)fetch('https://floating-harbor-78336.herokuapp.com/fastfood?searchKeyword=판교&perPage=10&page=1').then()...카카오맵 API 사용방법
일반설명
http://apis.map.kakao.com/web/guide/
실제 지도를 그리는 Javascript API를 불러오기
지도를 띄우는 코드 작성 var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스 var options = { //지도를 생성할 때 필요한 기본 옵션 center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표(필수속성). level: 3 //지도의 레벨(확대, 축소 정도) }; var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
API 키 : 05384f5ffa79058c52233387b2b1142b
주소로 장소 표시하는 예시
http://apis.map.kakao.com/web/sample/addr2coord/
위 링크의 아래쪽 javascript + html 예시코드를 참고하여주세요.
코드주석의 괄호 3군데(APP KEY, 주소입력, 가게명 입력위치)를 참고하시면서 코드를 수정해주세요.
// 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 주소-좌표 변환 객체를 생성합니다 var geocoder = new kakao.maps.services.Geocoder();
// 주소로 좌표를 검색합니다 (아래에 가게 주소가 입력되게 해주세요) geocoder.addressSearch('제주특별자치도 제주시 첨단로 242', function(result, status) {
});