본문 바로가기
Vue.js

vue.js naver map & kakao map

by 캡틴노랑이 2022. 8. 18.
반응형

네이버 맵과 카카오맵 vue.js에서 사용할 때 초기형(?) 딱 기본적인 기능만 넣음.

대한민국에서 많이 사용되는 맵으로 비교하기 위해서 작성함.

응용 기능은 추가로 작성할 예정임.

 

개발환경

vue.js 3.2.13

 

 

*유투부가 병신같은 짓해서... 좀... 이상하게 보이지만... 확대해서 보면 좀더 보기 편함.

 

 

 

 

 

 

카카오맵

<template>
    <pre>
    카카오맵 기본기능
    좌클릭: 현좌표
    우클릭: 주소
    *더블클릭은 실행안 됨. 클릭이 먼저 실행되서 이벤트를 막음.
    </pre>
    <div id="map" style="width:800px;height:800px">
    </div>
</template>
<script>
    var kMap
    //var drawManager

    export default {
        name: 'KakaoMap'
        , components: {
        }
        , data() {
            return {
            }
        }

        , mounted() {
            if (window.kakao && window.kakao.maps) {
                this.initMap()
            }
            else {
                const script = document.createElement('script')
                script.onload = () => kakao.maps.load(this.initMap)
                document.head.appendChild(script)
            }

        }
        , methods: {
            initMap()
            {
                const container = document.getElementById("map")
                const options = {
                    center: new kakao.maps.LatLng(37.5216223, 126.9788689),
                    level: 5,
                    //mapTypeId:kakao.maps.MapTypeId.SKYVIEW,
                    mapTypeId:kakao.maps.TERRAIN,
                    disableDoubleClickZoom: true
                }

                kMap = new kakao.maps.Map(container, options)

                ///zoom control
                // var zoomControl = new kakao.maps.ZoomControl()
                // kmap.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT)

                //this.userDrawPolygonSetting()//폴리곤 그리는 로직은 별도로 빼 놓음.
                this.kakaoMapEvent()         //맵이벤트
            }

            , kakaoMapEvent()
            {
                kakao.maps.event.addListener(kMap, 'click', this.mapClick)
                kakao.maps.event.addListener(kMap, 'dblclick', this.doubleClick)
                kakao.maps.event.addListener(kMap, 'rightclick', this.rightclick)
            }

            , mapClick(e)
            {
                 alert('현좌표(left click)' + e.latLng.Ma + '-' + e.latLng.La)
            }

            , doubleClick(e)
            {
                //클릭이 먼저 타서 안탐.
                 alert('현좌표(double click)' + e.latLng.Ma + '-' + e.latLng.La)
            }

            , rightclick(e)
            {
                var geocoder = new kakao.maps.services.Geocoder();

                var coord = e.latLng;
                var callback = function(result, status) {
                    if (status === kakao.maps.services.Status.OK) {
                        alert('현주소(rightClick) ' + result[0].address.address_name);
                    }
                };

                geocoder.coord2Address(coord.getLng(), coord.getLat(), callback);
            }
        }
    }
</script>
<style scoped>

</style>

 

 

 

 

네이버 맵 

*네이버도 카카오처럼 할 수 있으나,,, 알 수 없는 에러가 조금 있어서... 형태가 변형됨. 

<template>
    <pre>
    네이버맵 기본 기능
    좌클릭: 현좌표
    우클릭: 주소
    *더블클릭은 실행안 됨. 클릭이 먼저 실행되서 이벤트를 막음.
    </pre>
    <div id="map" style="width:800px;height:800px"></div>

</template>
<script>
    var nMap

    export default {
        name: 'NaverMap'
        , components: {

        }
        , data() {
            return {
            }
        }

        , mounted() {
            // if (window.naver && window.naver.maps) {
            //     this.initMap()
            // }
            // else {
            //     const script = document.createElement('script')
            //     script.onload = () => naver.maps.load(this.initMap)
            //     document.head.appendChild(script)
            // }
            this.initMap()
        }
        , methods: {
            initMap()
            {
                var mapOptions = {

                      scaleControl: true           //우하단 축척
                    , logoControl: true            //네이버 로고 뭔지 모르겠음.
                    , mapDataControl: true         //좌하단 네이버 로고
                    , mapTypeControl: true         //지도 유형 컨트롤
                    , zoom: 15
                    , zoomControl: true            //줌 컨트롤
                    // , zoomControlOptions: {     //줌 컨트롤 스타일
                    //     style: naver.maps.ZoomControlStyle.SMALL,
                    //     position: naver.maps.Position.TOP_RIGHT
                    //     }                        //주석 풀면 우측에 +-로만 생김
                    , maxZoom : 19                  //최대 줌 레벨
                    , minZoom :6                    //최소 줌 레벨
                    , disableDoubleClickZoom : false//더블 클릭해 지도를 확대하는 기능의 사용 여부
                    , mapTypeId: naver.maps.MapTypeId.NORMAL//NORMAL SATELLITE HYBRID  지도의 초기 지도 유형 id입니다.
                    , keyboardShortcuts : true      //키보드 방향 키를 이용한 지도 이동(패닝) 허용 여부입니다.
                }

                nMap = new naver.maps.Map('map', mapOptions)

                //map event
                //var listener = naver.maps.Event.addListener(nMap.getElement(), 'click', this.mapClick) //삭제할 경우
                //naver.maps.Event.removeDOMListener(listener); 삭제할 경우

                naver.maps.Event.addListener(nMap, 'click', this.mapClick)
                naver.maps.Event.addListener(nMap, 'dblclick', this.mapDblClick)
                naver.maps.Event.addListener(nMap, 'rightclick', this.mapRightClick)

                nMap.setCenter(new naver.maps.LatLng(37.5216223, 126.9788689))
            }

            , mapClick(e)
            {
                alert('현좌표(left click)' + e.coord.x + '-' + e.coord.y)
            }
            , mapDblClick(e)
            {
                //클릭이 먼저 타서 안탐.
                alert('map dblclick' + e.coord.x + '-' + e.coord.y)
            }
            , mapRightClick(e)
            {
                naver.maps.Service.reverseGeocode({
                    coords: new naver.maps.LatLng(e.coord.y, e.coord.x),
                }, function(status, response) {
                    if (status !== naver.maps.Service.Status.OK) {
                        return alert('Something wrong!');
                    }

                    var result = response.v2 // 검색 결과의 컨테이너
                    //var items = result.results // 검색 결과의 배열
                    //var address = result.address // 검색 결과로 만든 주소

                    alert('현주소(rightClick) ' + result.address.jibunAddress)

                });
            }

        }
    }
</script>
<style scoped>

</style>

mounted()에 주석된 부분이 카카오처럼 쓸 수 있는 부분인데... 코드를 수정하다 보면... 실행이 안 될 때가 있음. 

조금 불안해서 주석처리하고 다른 방법으로 처리함. 

 

아래 코드가 필요함. 

 

public/index.html에 네이버 자바스크립트를 추가함.

**이렇게 안하고 카카오처럼 하실 수 있는 분은 댓글로 알려주세요.

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

 

 

실행이 안된다면.... 버전확인.

 

아.. 추가로 2.x버전에서는 위 코드는 작동 안될 것 임. 

3.x버전부터 가능함. 

단, 아래 코드 추가해야됨. 

 

 

package.json에 하단 globals부분 이 거 안하면 에러남. 위치는 아래 임.

 

    "globals": {
      "kakao": false,
      "naver": false
    }
 
 
아래 처럼 추가하면 됨. 
"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
      "no-unsed-vars": "off",
      "no-mixed-spaces-and-tabs": 0
    },
    "globals": {
      "kakao": false,
      "naver": false
    }
  },

 

 

*맵 키는 예시이기 때문에 작동안 함.  모자이크 처리 귀찮아서 문자만 유사하게 변경하였음. 

반응형
저작자표시

'Vue.js' 카테고리의 다른 글

DevExtreme DataGrid 컬럼 정렬 (vue.js)  (1) 2022.09.16
DevExtreme DataGrid basic (vue.js)  (190) 2022.09.15
DevExtreme Button 스타일 정리(vue.js 버전)  (2) 2022.09.15
vue.js naver map & kakao map(샘플)  (280) 2022.08.25
kakao map 관련  (1) 2021.07.22

관련글

댓글

티스토리툴바