javascript - vue.js mapbox map 未显示

Question

我想要显示我的 map ，但无论我做什么，它都不会显示 map 。

我当前使用的代码如下:

<template>
    <div>
        <MglMap
            :accessToken="mapboxAccessToken"
            :mapStyle.sync="mapStyle"
            :center="coordinates"
        />

        <button class="btn btn-contained btn-success add-location" v-on:click="addLocation"><span>Button</span></button>
    </div>

</template>

<script>
    import Mapbox from "mapbox-gl";
    import { MglMap } from "vue-mapbox";

    export default {
        components: {
            MglMap
        },
        props: {
            currLat: Number,
            currLon: Number,
            allPoints: Array
        },
        // Mounted (page load), we ask to track
        mounted: function () {
            const options = {
                enableHighAccuracy: true
            };
            this.$watchLocation(options)
                .then(coordinates => {
                    // Set the center to my coordinates
                    this.currLat = coordinates.lat;
                    this.currLon = coordinates.lng;
                    // Emit the user data to all connected devices.
                    this.$socket.emit('USER_COORDS', {
                        'user': this.$socket.id,
                        'lat': this.currLat,
                        'lon': this.currLon
                    });
                });
        },
        data() {
            return {
                mapboxAccessToken: "removed",
                mapStyle: "mapbox://styles/mapbox/streets-v10",
                coordinates: [0.0, 0.0]
            };
        },
        created() {
            // We need to set mapbox-gl library here in order to use it in template
            this.map = Mapbox;
        },
        methods: {
            geolocateError(control, positionError) {
                // console.log(positionError);
                Latte.ui.notification.create({
                    title: "An error occurred!",
                    message: "We could not get your location, please try again by reloading the application."
                });
            },
            geolocate(control, position) {
                console.log(
                    `User position: ${position.coords.latitude}, ${position.coords.longitude}`
                )
            },
            addLocation: function() {
                this.$socket.emit('NEW_LOCATION', {
                    name: 'VK1',
                    lat: this.currLat,
                    lon: this.currLon
                });
            }
        },
        sockets: {
            USER_COORDS_DATA: function (data) {
                // user connects, data of the current location gets emitted
                // this.map.flyTo({
                //     center: [data.lon, data.lat],
                //     zoom: 15,
                //     speed: 1
                // });
                // console.log(data)
            },
            NEW_LOCATION_DATA: function (data) {
                // Returned data from the server (after storage)
                console.log(data)
            },
        },
    }
</script>

<style>
    @import '../../node_modules/mapbox-gl/dist/mapbox-gl.css';
    #map {
        width: 100%;
        height: calc(100vh - var(--app-bar-height));
    }
    .btn.add-location {
        position: absolute;
        left: 2rem;
        bottom: 2rem;
    }
</style>

我在控制台中得到以下输出:

我不知道这里出了什么问题，甚至不知道为什么我会遇到 dom 异常？

我只想显示我的 map 并在您的位置上显示一个标记，知道这里发生了什么吗？为什么 map 没有渲染？

使用的包:
- "mapbox-gl": "^1.3.1",
- “vue-mapbox”:“^0.4.1”，

Answer 1

我也遇到了类似的问题，我无法完全显示 map ，甚至无法显示 VueMapbox 的演示 https://soal.github.io/vue-mapbox/不适合我。

但是，我在 chrome 中检查后发现整个 div 的高度设置为 0，这很奇怪。然后我手动设置高度，它起作用了

我在项目 github 上创建了一个问题，所以我们可能会看到问题出在哪里:https://github.com/soal/vue-mapbox/issues/158

TLDR:手动设置高度