我正在尝试在 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 不起作用。如果有人能帮助我,我将不胜感激。谢谢。
最佳答案
在父元素上使用 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>
关于javascript - vue.js 中的热图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51779553/