初始化后在 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>

解决了

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

Answer 1

beforeUpdate看起来不像正确的钩子。你可能应该使用mounted.此外，您的变量map超出了您的getPitch方法的范围。