Javascript 初始化后在Vue中使用Mapbox GL JS

下面是我的

Map.vue

，其中部分代码被缩写，因此我不会公开任何信息。地图是我的应用程序的一个组件，我想添加一些交互。但是，我的

方法

不起作用，说

读取未定义的
的属性“getPitch”。如何初始化映射，使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>


试验
从“mapbox gl”导入mapboxgl；
导出默认值{
名称：“地图”，
数据（）{
返回{
};
},
道具：{
地图数据：{
类型：对象，
默认值：（）=>{return{}；}
}
},
更新之前（）{
mapboxgl.accessToken=“…”；
常量映射=新的mapboxgl.map({
容器：“地图”，
风格：“…”，
中心：。。。，
缩放：11.85，
});
让mapRecords=this.mapdata.data；
map.once（'styledata'，function（）{
map.addSource（“…”{
...
});
map.addLayer({
...
})
});
},
方法：{
getPitch（）{
map.getPitch（）；
}
}
};
...

已解决

首先，将
beforeUpdate（）
中的所有
map
实例更改为
this.map
。然后，在
getPitch
函数中，添加以下行：
let map=this.map
在更新之前
看起来不像右钩子。您可能应该使用
mounted

另外，变量
map
超出了
getPitch
方法的作用域。
我假设这又是Vue 3？
在更新之前仍然有效，因为我正在等待来自父对象的数据（
mapdata
对象）。至于第二部分，您是对的。但是，如果
mapdata
发生更改，您将创建一个全新的
map
实例，这可能不是您想要的。