아이니그마

1.스와이프 생성 2. 조회한 매장은 드래그 이벤트에도 유지 1.스와이프 생성 https://swiperjs.com/vue Swiper Vue.js Components Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 그리고 swiper.min.css 받아서 main에 임포트 해준다 2. 조회한 매장은 드래그 이벤트에도 유지 onMouseIndex 배열에 조회한 번호를 넣고 clearSuperAndMarketMarkerArr가 실행 될때 제외해 준다

1.지도를 생성한다 2.드래그 이벤트를 등록한다 3.드래그 종료시 중심 좌표를 얻는다 4.중심좌표의 주소를 얻는다 5.주소로 키워드 검색을한다 6.marker 를 표시한다 모든 과정은 카카오 공식문서에 있다 1.지도를 생성한다 -https://cordingmonster.tistory.com/248 Vue 카카오 지도 만들기 1.개발자센터에서 자바스크립트 키를얻는다 2.카카오 지도를 호출한다 자세한설명 -https://apis.map.kakao.com/web/guide/ 코드 1.index.html에 sdk호출을 세팅한다 - 2.지도를 호출한다 -mount 시킨다 vuex문.. cordingmonster.tistory.com 2.드래그 이벤트를 등록한다 마운트에 등록해주면된다 3.드래그 종료시 중심 좌표를..

1.개발자센터에서 자바스크립트 키를얻는다 2.카카오 지도를 호출한다 자세한설명 -https://apis.map.kakao.com/web/guide/ 코드 1.index.html에 sdk호출을 세팅한다 - 2.지도를 호출한다 -mount 시킨다 vuex문법이 있는데 vue로 하려면 this.setDomSize(window.innerWidth,window.innerHeight) =>new window.kakao.maps.Map(mapContainer, mapOption); 바꿔서 사용하면된다 저 'init' 액션 안에 동일한 코드가 있다 여기서 중요한점 window.kakao로 해줘야 index.html의 sdk에서 가져올 수있다 3.사이즈 지정과 리사이즈 이벤트 mount에 이벤트 리스너를 걸어 놓았다 r..

기업회원가입 후 매장 등록을 할 때 1. 주소를 선택하면 매장 위치를 표시해주고 2. 배달 반경을 입력하면 매장 중심에서 n키로만큼 원을 그려주기였다 문서 https://apis.map.kakao.com/web/sample/drawShape/ 이렇게 마커가 뜨고 이동한다 이제 반경 숫자를 입력하면 이렇게 원이 나온다 여기서 다시 주소를 검색하거나 숫자를 바꿔도 자연스럽게 움직인다 소스를 봐 보자 1. 주소 마커 표시하기 1. 주소 선택이 완료되면 결과를 result로 들고 온다 2. 결과값이 ok라면 마커 표시 3. 반경까지 정했다면 재탐색 좌표를 중심으로 원 그려주기를 해준다 2-1. 원 그려주기 1. 반경 입력값이 숫자인지 검사한다 2. 원을 그리는 함수 호출한다 2-2. 원 그려주기 1. 이전에 그..

지난주 일요일 배달의 민족을 시켰는데 배달원의 위치가 실시간으로 나타나는 걸 봤다 너무 신기해서 비슷하게라도 만들어보자 해서 만들게 되었다 일단 지도는 카카오지도를 사용하면 될 거다 라고 생각했고 문제는 위치 정보를 어떻게 얻어오지..? 라고 생각하고 찾아봤다 그랬더니 놀랍게도 html이 자체적으로 가지고있는 기능이 있었다 navigator.geolocation=현재 위치 위도 경도를 알려준다 navigator.watchPosition=현재 위치+움직일 때마다 같이 움직인다 그래서 적용을 해보았다 1.개발자 센터 도메인등록 네이버 개발자센터-> 어플 생성 or기존 어플 입장-> 플랫폼-> 사이트 도메인에 입력-> 요약정보에서 자바스크립트 api키 확인 http://localhost:9090 2. 카카오 ..