1.개발자센터에서 자바스크립트 키를얻는다
2.카카오 지도를 호출한다
자세한설명
-https://apis.map.kakao.com/web/guide/
코드
1.index.html에 sdk호출을 세팅한다
-<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=자바스크립트key"></script>
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에 이벤트 리스너를 걸어 놓았다
refs로 돔에 접근해서 사이즈를 조정해주면된다
'Vue > vue3+vuex' 카테고리의 다른 글
| vue ec2 베포중 unknown disableHostCheck 에러 (0) | 2022.08.25 |
|---|---|
| Vue 페이징/검색 만들기 뒤로/앞으로가기 버튼대응하기 (0) | 2022.08.18 |
| Vue3 네비바 설계하기 (0) | 2022.08.14 |
| vue3 watch를 활용하자 (0) | 2022.08.12 |
| Vue3 여러개 store 관리하기 store 별로 actions/getter 호출하기 (0) | 2022.07.19 |