[英]Heatmap in vue.js
I am trying to create heatmap in vue.js, I am using vue-google-heatmap for it. 我正在尝试在vue.js中创建热图,我正在使用vue-google-heatmap。 The map works fine if I try to hardcode the lat and lng, but when I try to call the lat and lng from db it doesnt work, my code is here:
如果我尝试硬编码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}]
then i see the points on map but with direct api call it doesnt work. 然后我看到地图上的点,但直接api调用它不起作用。 would really appreciate if someone could help me.
如果有人能帮助我,我真的很感激。 Thanks.
谢谢。
use v-if="points.length" on parent element 在父元素上使用v-if =“points.length”
so it will render the map only when you have your values from db. 所以它只有在你拥有db的值时才会渲染地图。
eg: 例如:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.