Question

我想显示我的地图，但是我没有做任何事情，它不显示地图。

我当前使用的代码如下：

<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异常？

我只想显示我的地图，并在您的位置上显示一个标记，知道这是怎么回事吗？为什么不渲染地图？

使用的包装：
-"mapbox-gl": "^1.3.1",
-"vue-mapbox": "^0.4.1",

Answer 1

我遇到了类似的问题，即使VueMapbox https://soal.github.io/vue-mapbox/的演示对我来说也不起作用，我无法完整显示地图。

但是，在用chrome进行检查后，我发现整个div的高度都设置为0，这很奇怪。为什么。然后我手动设置了高度，就可以了

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

TLDR：手动设置高度

Answer 2

在我的情况下，此问题是由body标签的height: 100%引起的。我将body标签设置为px，即height: 500px对我来说很好用。

vue.js mapbox地图未显示

2 个答案: