마커를 가져오지만 lat & lg는 무효입니다 - vue . discription .

마커를 가져오지만 lat & lg는 무효입니다 - vue . discription .

지도에 마커를 표시하려고 합니다.vue dev tool에서 문제없이 데이터를 가져왔습니다.또한.this.markers데이터도 가지고 있습니다.하지만 내 안에lat그리고.lng무효입니다.

제가 하는 방식이 잘못된 건지 잘 모르겠어요.

data(){
        return {
            markers: []

        }
    },
    computed: {
        articles(){
            return this.$store.getters.getArticles;
        }
    },
    watch: {
        articles(){
            this.buildMarkers();
            this.clearMarkers();
        }
    },
    methods: {
        clearMarkers(){
            for( var i = 0; i < this.markers.length; i++ ){
                this.markers[i].setMap( null );
            }
        },
        buildMarkers: function(){

            this.markers = [];

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

                var position = new google.maps.LatLng(this.articles[i].lat, this.articles[i].lng);
                console.log(position);

                var marker = new google.maps.Marker({
                    position: position,
                    map: this.map
                });

                this.markers.push(marker);
            }
        },
    },
    mounted(){
        this.map = new google.maps.Map(document.getElementById('article-map'), {
            center: {lat: this.latitude, lng: this.longitude},
            zoom: this.zoom
        });
        this.clearMarkers();
        this.buildMarkers();
    },

좀 더 이해하기 쉽게 이게 데브툴의 이미지입니다.

그런데 지도를 볼 수 있어요.단, lat & lg가 비어있기 때문에 마크가 보이지 않습니다.

마커의 배열이 있기 때문에buildMarkers()함수가 실행되어 지도에 추가되었을 것입니다.

콘솔에 열려 있는 마커의 맵속성이 null로 설정(맵에서 삭제)되었습니다.이는 다음을 의미합니다.clearMarkers()또한 실행되었습니다.

당신의 기사() 워처(watcher)에서 당신이 먼저 작성한 후 마커를 지우는 것을 알 수 있습니다.제 생각엔 아마 이렇게 읽혀야 할 것 같아요.

articles(){
  this.clearMarkers();
  this.buildMarkers();
}

언급URL : https://stackoverflow.com/questions/56523437/fetching-the-markers-but-lat-lng-being-null-vue-js