获取标记但 lat 和 lng 为空 - vue.js

Question

我正在尝试在地图上显示标记。我在 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();

    },

为了更容易理解，这是 devtool 的图像。

顺便说一下，我可以看到地图。唯一的问题是我看不到上面的标记，因为 lat & lng 是空的。

Answer 1

您有一个标记数组，因此buildMarkers()必须已执行该函数，这会将它们添加到地图中。在控制台中打开的标记的地图属性已设置为 null（将其从地图中删除），这意味着也clearMarkers()已执行。我注意到在您的文章（）观察者中，您首先构建然后清除标记。我认为它可能应该读articles(){&nbsp; this.clearMarkers();&nbsp; this.buildMarkers();}