카카오맵 현재위치로 이동 - kakaomaeb hyeonjaewichilo idong

1. 내 위치를 이용해 카카오 맵에 내 위치를 나타냄 2. 내 위치를 바탕으로 주변 충전소의 위치를 보여줌 3. 그 충전기를 선택함 4. 길찾기로 연결되도록 설정

첫째로, kakao map key 를 받아온다. https://developers.kakao.com/ 여기에서 자신의 앱을 등록하고 javascript KEY를 받아오면된다.

둘째, 웹의 header에 스크립트로 키를 등록해서 kakao api 를 받아올 수 있도록 세팅한다.

<header> <script type=”text/javascript” src=”//dapi.kakao.com/v2/maps/sdk.js?appkey=YOUR_APP_KEY&libraries=services,clusterer”></script> </header>

셋째로, 화면에 맵을 설정한다.

<div id=’centermap’ style={{width: ‘100%’ , height: `${windowHeight}px`, backgroundColor:’white’,position: ‘relative’, zIndex: 0}}>

이 태그에 kako api를 통해서 맵을 받아와 올린다. 리엑트는 componentdidmount 나 useEffect에서 실행하면된다.

kakao.maps.load(() => {

let markers = []

let mapContainer = document.getElementById(‘centermap’) // 지도를 표시할 div

let mapOption = {

center: new kakao.maps.LatLng(lat, long), // 지도의 중심좌표

level: 9// 지도의 확대 레벨

};

var map = new kakao.maps.Map(mapContainer, mapOption);

let markerPosition = new kakao.maps.LatLng(lat, long)

let centerMarker = new kakao.maps.Marker({

position: markerPosition

})

markers.push(centerMarker)

for (var i = 0; i < markers.length; i++) {

markers[i].setMap(map);

}

위와 같이 내 위치를 카카오 맵을 이용해서 나타낼수 있었다.

이제 주변 센터 들의 위치를 가져온 다음 마커를 생성해야한다. 여기에서 까다로운 부분은 단순히 마커를 지도를 나타내는 것만이 아니라 ‘클릭해서 선택이 가능’ 해야하며 선택한 ‘마커에 대한 정보를 가져와야’ 한다. 그리고 클릭 전, 클릭 후 마커는 아이콘이 달라야한다.

그래서 kakao 문서를 바탕으로 작업을 진행했다.

let selectedMarker = null;

for (var i = 0; i < centers.length; i ++) {

console.log(centers) // centers 안에는 위도 경도 정보들이 있다.

var imageSize = new kakao.maps.Size(30, 40),

imageOptions = {

spriteOrigin: new kakao.maps.Point(0, 0),

spriteSize: new kakao.maps.Size(30, 40)

}; // 마커 이미지의 위치와 사이즈를 결정하는 부분 커스터마이징 가능

var markerImage = createMarkerImage(map_marker, imageSize, imageOptions)

let marker = createMarker(centers[i], markerImage, map);

kakao.maps.event.addListener(marker, ‘click’, clickHandler(map,centers[i]));

// 클릭 이벤트 핸들러를 설정하는 부분이다.

markers.push(marker)

function clickHandler (map, center) {

return ()=>{

setClicked(center) // 클릭된 센터를 설정하는 부분

if (!selectedMarker || selectedMarker !== marker) {

var imageSize = new kakao.maps.Size(30, 40),

imageOptions = {

spriteOrigin: new kakao.maps.Point(0, 0),

spriteSize: new kakao.maps.Size(30, 40)

};

let normal_image = createMarkerImage(map_marker, imageSize, imageOptions)

!!selectedMarker && selectedMarker.setImage(normal_image);

// 클릭된 마커 객체가 null이 아니면

// 클릭된 마커의 이미지를 기본 이미지로 변경한다

selectedMarker = marker;

var imageSize = new kakao.maps.Size(50, 50)

var imageOptions = {

spriteOrigin: new kakao.maps.Point(0, 0),

spriteSize: new kakao.maps.Size(50, 50)

};

let clicked_image = createMarkerImage(clicked_marker, imageSize, imageOptions)

// 현재 클릭된 마커의 이미지는 클릭 이미지로 변경합니다

marker.setImage(clicked_image);

}

for (var i = 0; i < markers.length; i++) {

markers[i].setMap(map);

}

// 모든 마커를 맵에 세팅한다.

클릭 이전과 클릭 이후 마커 이미지가 다름을 확인 할 수 있다. setClicked를 통해서 이미 클릭한 센터의 정보(latitude, longtitude)를 스테잇에 저장 해놨기에 해당 마커의 위치로 경로 찾기를 하는 건 어렵지 않다.

웹뷰앱이기에 간단하게 외부 팝업으로 연결하는게 편하기에 restful api 로 kakao navigation 을 불러 왔다.

window.open(`https://map.kakao.com/link/to/${clicked.serviceCenterName},${clicked.lat},${clicked.lot}/from/현재위치,${global.lat},${global.long}`)

clicked.lat , clicked.lot 은 클릭된 마커의 정보이고

global.lat, global.long 은 현재 내 위치 정보이다.

이제 남은 건 검색을 통해서 특정 충전소를 찾고 그 충전소에 대한 정보를 가져오는 것이다.

대한민국에서 가장 빠른 길을 안내하는 카카오맵!
가장 빠른 길찾기는 물론 맛집, 주변추천 등
당신이 기대하는 길찾기의 모든 것을 만나보세요!

◼︎ 빠른 길찾기가 필요한 순간!
✔ 가장 빠르고 정확한 지도
자동차/대중교통/도보/자전거 무엇을 이용하든 24시간 내에 업데이트 된 최신정보로 안내해요
✔ 바로 내비게이션 안내
별도의 설치 없이, 길찾기 후 카카오맵에서 바로 내비게이션 안내를 받아요
✔ 메뉴 이동 없는 통합검색
검색창 하나로 버스번호, 정류장, 장소 등 모든 정보를 한 번에 찾을 수 있어요

◼ 주변 정보가 필요한 순간!
✔ 지금 당신을 위한 추천
당신의 현 위치를 기반으로 맛집/검색어/스팟/축제 등 유용한 정보를 추천해드려요
✔ 지도 위 영역 검색
지도 상에서 ‘이 지역 재검색’ 기능으로 바로 검색결과를 볼 수 있어요!
✔ 데이터가 알려주는 장소
방문자 빅데이터를 분석하여 장소에 대한 연령별/성별/요일별 정보를 알려드려요!

◼ 더욱 전문적인 지도가 필요한 순간!
✔ 폴더로 관리하는 나만의 즐겨찾기
폴더 형태로 즐겨찾기를 관리하고, 지도 위 표시는 물론 폴더 공유&구독까지 한번에!
✔ 미리 보는 로드뷰
길찾기 후 로드뷰로 장소 방문 전 미리 현장을 볼 수 있어요
✔ 실제 장소 같은 3D 지도
벡터 기반의 지도로 360º 회전, 기울이기가 가능한 3D뷰로 더욱 실감나는 지도를 제공해드려요
✔ 하늘에서 보는 실사3D 스카이뷰
입체적인 지도 검색이 필요할때 실사 3D스카이뷰를 활용하세요

◼ 그리고 당신의 길찾기를 위한 모든 부가기능
✔ 지도 위에 바로 표시되는 즐겨찾기
✔ 기다림을 줄여주는 실시간 버스 정보
✔ 어느 길이 막히나 실시간 교통 정보
✔ 지하철로 어디 갈 땐 지하철 노선도
✔︎ 늦은밤 귀가할 땐 톡친구 위치공유 기능
✔︎ 제주 초정밀 버스위치정보 서비스

여러분과 함께 진화하는 카카오맵은 언제든지 여러분의 목소리를 기다립니다.
✔ 문의 창구
-
- 카카오 고객센터 홈페이지(http://www.kakao.com/requests?locale=ko&service=59)
- 고객센터: 1577-3321
- 개발자 연락처: 1577-3754

----
◼︎서비스 접근 권한 안내
[선택 접근 권한]
- 위치 : 현위치, 주변검색
- 마이크 : 음성검색
- 저장공간: 내비게이션, 사진업로드
- 전화: 내비게이션
- 카메라: 사진 촬영
- 다른 앱 위 표시 : 길안내 위젯

* 선택 접근 권한은 동의하지 않아도 서비스 이용이 가능합니다.
* 안드로이드 6.0 미만 버전을 사용 중일 경우 선택 권한을 개별적으로 허용할 수 없으므로,
보유하고 있는 단말의 제조사에서 운영체제 업그레이드 기능을 제공하는지 확인해 보신 뒤
가능하다면 6.0 이상으로 업데이트하는 것을 권장합니다.
----
개발자 연락처 :
1577-3754
----
개발자 연락처 :
1577-3754