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

Question

下面是我的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>

已解决

首先，将beforeUpdate() 中的所有map 实例更改为this.map。然后，在getPitch 函数中，添加这一行：let map = this.map;。

Answer 1

beforeUpdate 看起来不像正确的钩子。您可能应该使用mounted。

此外，您的变量 map 超出了您的 getPitch 方法的范围。