Vue 카카오맵 map 속성관련 질문드리겠습니다

카카오맵 API (지도/로컬)
1

안녕하세요.
Vue.js에서 카카오 맵을 사용중인데 질문이 있습니다.
지도에서 지도 검색 기능을 만드려고 하는중이고
검색을 하면 검색 장소에 지도 중심을 이동시키게 만들고 싶습니다.
검색을 하면 geocorder를 통해서 좌표를 가지고 오는데 map.setCenter(coords)의 map 속성을 읽지 못합니다.지도 질문

지도 구현은 index.html에서 script를 고정으로 넣어두고 사용하는 방법을 사용했습니다.

kakaomap.vue에는

data() {
  return {
    msg:"다음맵 테스트",
    map: '', // 지도 객체

mounted() {
      this.container = document.getElementById('map');
      this.map = this.createMap()
      this.geocoder = new kakao.maps.services.Geocoder()

methods: {
searchSubmit() {

          // 주소로 좌표를 검색합니다
          this.geocoder.addressSearch(this.keyword, function(result, status) {

              // 정상적으로 검색이 완료됐으면
               if (status === kakao.maps.services.Status.OK) {
                  console.log(result[0].y)
                  console.log(result[0].x)

                  var coords = new kakao.maps.LatLng(result[0].y, result[0].x)
                  this.map.setCenter(coords); //에러 나는 부분
              }

          });
        }
}

이렇게 구현을 했는데 methods의 searchSubmit()안의 map속성을 읽지못합니다.
해결방법 도움 요청드리겠습니다.

2

map 생성이 되면 this.map에 담아 주나요?
아래 코드도 함께 참고해주세요.

export default {
    name: 'app',
    data() {
        return {
            map: null
        };
    },
    mounted() {
        this.initMap();
    },
    methods: {
        initMap() {
            let container = document.getElementById('map');
            let options = {
                center: new kakao.maps.LatLng(37.566826, 126.9786567),
                level: 3
            };

            let map = new kakao.maps.Map(container, options);

            this.map = map;

            this.geocoder = new kakao.maps.services.Geocoder();
        },
        searchSubmit() {
            this.geocoder.addressSearch('해남군 송지면', (result, status) => {
                if (status === kakao.maps.services.Status.OK) {

                    let bounds = new kakao.maps.LatLngBounds();

                    for (let i = 0; i < result.length; i++) {
                        let data = result[i];
                        bounds.extend(new kakao.maps.LatLng(data.y, data.x));
                    }

                    this.map.setBounds(bounds);
                }
            });
        }
    }
};
1개의 좋아요
3

답변 감사드립니다.
하지만 알려주신 방법을 적용해도 여전히 map 속성을 참조하지 못합니다…

4 
// (X) 이렇게 하면 addressSearch의 콜백 함수 안에서는 this가 undefined
this.geocoder.addressSearch(this.keyword, function(result, status) { /* do something */ });


// (O)
this.geocoder.addressSearch(this.keyword, (result, status) => { /* do something */ });

변경하지 않은 것은 아닌지 다시 한 번 확인해 보세요.

5

아 감사합니다!!
덕분에 해결하였습니다.