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