vue.js 中的热图

Question

我正在尝试在 vue.js 中创建热图，我正在为此使用 vue-google-heatmap。如果我尝试对 lat 和 lng 进行硬编码，地图工作正常，但是当我尝试从 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}]

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

Answer 1

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

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

例如：

<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>

vue.js 中的热图

Heatmap in vue.js

javascript

heatmap

laravel

vue.js