如何解决初始化后在Vue中使用Mapbox GL JS
我的Map.vue
在下面,代码的一部分被缩写,因此我不公开任何信息。该地图是我的应用程序的一个组件,我想向其中添加一些交互。但是,我的method
说read property 'getPitch' of undefined
无效。如何初始化地图,以便以后仍可以使用Mapbox的功能?
<template>
<div id="map" class="map">
<button @click="getPitch">Test</button>
</div>
</template>
<script>
import mapboxgl from 'mapbox-gl';
export default {
name: "Map",data() {
return {
};
},props: {
mapdata: {
type: Object,default: () => { return {}; }
}
},beforeUpdate() {
mapboxgl.accessToken = "...";
const map = new mapboxgl.Map({
container: "map",style: "...",center: ...,zoom: 11.85,});
let mapRecords = this.mapdata.data;
map.once('styledata',function() {
map.addSource('...',{
...
});
map.addLayer({
...
})
});
},methods: {
getPitch() {
map.getPitch();
}
}
};
</script>
<style scoped>
...
</style>
已解决
首先,将map
中的所有beforeUpdate()
实例更改为this.map
。然后,在getPitch
函数中添加以下行:let map = this.map;
。
解决方法
beforeUpdate
看起来不像右钩子。您可能应该使用mounted
。
此外,变量map
在getPitch
方法的范围之外。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。