初始化后在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方法的范围。