javascript - vue.js 中的热图

Question

我正在尝试在 vue.js 中创建热图，为此我使用了 vue-google-heatmap。如果我尝试对 lat 和 lng 进行硬编码， map 工作正常，但是当我尝试从 db 调用 lat 和 lng 时它不起作用，我的代码在这里:

<template>
<div class="row">

    <div class="col-sm-12">
        {{this.points}}
        <vue-google-heatmap
                :initial-zoom="10"
                :lat="3.650752"
                :lng="101.793052"
                :points="points"
                :width="600"
                :height="350"/>

    </div>

</div>

  </template>

 <script>

export default {
    data() {
        return {
            points: []
        }
    },
    mounted: function () {

        this.load();
    },

    methods: {
        load() {
            axios.get('/api/user_locations').then((res) => {

                this.points = res.data;

            });
        }
    }
}
 </script>

  this is response from api: [{"lat":3.148197,"lng":101.714899}, 
  {"lat":3.129671,"lng":101.670756}]

 if on data i do this points: [{"lat":3.148197,"lng":101.714899}, 
 {"lat":3.129671,"lng":101.670756}] 

然后我在 map 上看到了点，但直接调用 api 不起作用。如果有人能帮助我，我将不胜感激。谢谢。

Answer 1

在父元素上使用 v-if="points.length"

因此只有当您从数据库中获取值时，它才会渲染 map 。

例如:

<div class="col-sm-12" v-if="points.length">
    <vue-google-heatmap
            :initial-zoom="10"
            :lat="points[0].lat"
            :lng="points[0].lng"
            :points="points"
            :width="600"
            :height="350"/>

</div>