javascript - 获取标记但纬度和经度为空 - vue.js

Question

我正在尝试在 map 上显示标记。我在 vue 开发工具中毫无问题地获取了数据。 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();
    },

为了更容易理解，这是开发工具的图像。

顺便说一下，我可以看到 map 。唯一的问题是我看不到上面的标记，因为纬度和经度是空的。

Answer 1

您有一个标记数组，因此必须执行 buildMarkers() 函数，这会将它们添加到 map 中。

在控制台中打开的标记的 map 属性已设置为 null(将其从 map 中删除)，这意味着 clearMarkers() 也已执行。

我在您的 articles() 观察器中注意到您首先构建然后清除标记。我认为它应该可以阅读

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