[자바웹프로그래밍] 프로필 구현,지도서비스 구현

프로필 구현을 해보겠다.

 

먼저 index_login.html을 수정해준다.

 

네비게이션에서 프로필칸을 만들어주고 profile.html을 주소로 넣어주고 만들어준다.

 

index_login.html의 구조를 가져와 바디쪽에 

https://mdbootstrap.com/docs/standard/extended/profiles/

Bootstrap Profile - free examples, templates & tutorial

다음 주소를 통해 프로필 코드를 가져온다.

그럼 다음과 같은 화면이 보인다.

 

내 정보에 맞게 수정해보겠다.

다음과같이 수정하면 성공이다.

 

이제 지도서비스를 구현해보겠다.먼저 지도서비스를 구현하기전에 

주요 API

• https://navermaps.github.io/ (네이버)

• https://apis.map.kakao.com/ (카카오)

• https://map.seoul.go.kr/smgis2/seoulMap (분야별 지도 서비스)

 

이 API를 이용할 것이다. 우리는 카카오를 이용해보겠다.

https://developers.kakao.com/

Kakao Developers

이 사이트로 들어가 등록해준다.

 

메뉴 - 내 에플리게이션 추가 - 정보 입력을 하면 

이렇게 키를 준다. 여기서 자바스크립트 키 를 사용하면 된다.

플랫폼 키에 들어가 사이트 도메인 주소를 등록해준다.

그리고 카카오 맵에 들어가

이렇게 ON을 해준다.

 

다시 위로 올라가 자바스크립트 키를 복사 후

다음 이미지 처럼 profile.html 헤드태그에 넣어준다. 

 

그리고 js_map.js를 만들어준다.

다음과 같이 코드를 작성해준다.

profile.html 에서 이 코드를 적절한 위치에 배치시켜주면

다음과 같이 보이게된다.

 

이번엔 지도에 관한 라이브러리를 추가해보겠다.

발급받은 키입력칸에서 키를 입력한 후 뒤에 이미지와 같은 태그를 붙여주면

• clusterer: 마커용 클러스터러 라이브러리 

• services: 장소 검색 과 주소-좌표 변환

• drawing: 지도 위 그래픽스 객체 드로잉

를 구현할 수 있게된다.

https://apis.map.kakao.com/web/sample/

 

다음 주소로 들어가. 

위의 3개에 맞는 기능들을 가져온다.

이렇게 위의 코드를 복사할 수 있게 해놓았다.

 

css 파일도 있으니 profile.css도 만들어주어서 붙여넣어준다.

.map_wrap, .map_wrap * {margin:0;padding:0;font-family:'Malgun Gothic',dotum,'돋움',sans-serif;font-size:12px;}

.map_wrap a, .map_wrap a:hover, .map_wrap a:active{color:#000;text-decoration: none;}

.map_wrap {position:relative;width:100%;height:500px;}

#menu_wrap {position:absolute;top:0;left:0;bottom:0;width:250px;margin:10px 0 30px 10px;padding:5px;overflow-y:auto;background:rgba(255, 255, 255, 0.7);z-index: 1;font-size:12px;border-radius: 10px;}

.bg_white {background:#fff;}

#menu_wrap hr {display: block; height: 1px;border: 0; border-top: 2px solid #5F5F5F;margin:3px 0;}

#menu_wrap .option{text-align: center;}

#menu_wrap .option p {margin:10px 0;}  

#menu_wrap .option button {margin-left:5px;}

#placesList li {list-style: none;}

#placesList .item {position:relative;border-bottom:1px solid #888;overflow: hidden;cursor: pointer;min-height: 65px;}

#placesList .item span {display: block;margin-top:4px;}

#placesList .item h5, #placesList .item .info {text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}

#placesList .item .info{padding:10px 0 10px 55px;}

#placesList .info .gray {color:#8a8a8a;}

#placesList .info .jibun {padding-left:26px;background:url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_jibun.png) no-repeat;}

#placesList .info .tel {color:#009900;}

#placesList .item .markerbg {float:left;position:absolute;width:36px; height:37px;margin:10px 0 0 10px;background:url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png) no-repeat;}

#placesList .item .marker_1 {background-position: 0 -10px;}

#placesList .item .marker_2 {background-position: 0 -56px;}

#placesList .item .marker_3 {background-position: 0 -102px}

#placesList .item .marker_4 {background-position: 0 -148px;}

#placesList .item .marker_5 {background-position: 0 -194px;}

#placesList .item .marker_6 {background-position: 0 -240px;}

#placesList .item .marker_7 {background-position: 0 -286px;}

#placesList .item .marker_8 {background-position: 0 -332px;}

#placesList .item .marker_9 {background-position: 0 -378px;}

#placesList .item .marker_10 {background-position: 0 -423px;}

#placesList .item .marker_11 {background-position: 0 -470px;}

#placesList .item .marker_12 {background-position: 0 -516px;}

#placesList .item .marker_13 {background-position: 0 -562px;}

#placesList .item .marker_14 {background-position: 0 -608px;}

#placesList .item .marker_15 {background-position: 0 -654px;}

#pagination {margin:10px auto;text-align: center;}

#pagination a {display:inline-block;margin-right:10px;}

#pagination .on {font-weight: bold; cursor: default;color:#777;}

 

다 적용하면 위와같이 보이게된다.

헤더 태그에 추가해주고.

다음과 같이 고쳐주면. 된다.