如何使用VUE/NUXT将动态标记添加到MAPBOX？

Question

因此，我让我的Mapbox继续前进，并希望动态添加标记（使用VUE/NUXT）。由于某种原因，标记不会出现在地图上，我不知道为什么。

从下面的代码中可以看到，console.log（）打印正确的坐标，因此这确实使我感到困惑。

有什么想法吗？

代码：

<template>
    <div id="map" class="h-screen w-screen">
    </div>
</template>

<script>
import mapboxgl from "mapbox-gl";

const turbines = [
    {
        "TurbineName": "Unit 1",
        "InstallationID": 100,
        "PriceArea": "DK1",
        "Latitude": 56.2000000000,
        "Longitude": 8.6000000000,
        "Value": 10.0
    },
    {
        "TurbineName": "Unit 2",
        "InstallationID": 101,
        "PriceArea": "DK1",
        "Latitude": 56.3000000000,
        "Longitude": 8.6000000000,
        "Value": -20.0
    },
    {
        "TurbineName": "Unit 3",
        "InstallationID": 102,
        "PriceArea": "DK1",
        "Latitude": 56.4000000000,
        "Longitude": 8.6000000000,
        "Value": -30.0
    }]

export default {
    name: 'MapBox',
    mounted() {
        this.createMap()
    },
    methods: {
        createMap() {
            mapboxgl.accessToken = 'pk.eyJ1IjoicmFzaiIsImEiOiJjbDQ2eTc4dXMwMDRrM2NwY2k4bnJpcXA3In0.gMSUw0D2RzfuJUxlKWKqAA';
            const map = new mapboxgl.Map({
                container: "map",
                style: 'mapbox://styles/mapbox/streets-v11',
                center: [10.676524188468528, 55.88490923940639],
                zoom: 6.75
            })

            for (const turbine of turbines) {
                // create a HTML element for each turbine
                const el = document.createElement('div');
                el.className = 'marker';

                // make a marker for each turbine and add to the map
                new mapboxgl.Marker(el)
                    .setLngLat([turbine.Longitude, turbine.Latitude])
                    .setPopup(
                        new mapboxgl.Popup({ offset: 25 }) // add popups
                            .setHTML(
                                `<h3>${turbine.TurbineName}</h3><p>${turbine.InstallationID}</p>`
                            )
                    )
                    .addTo(map);
                console.log([turbine.Longitude, turbine.Latitude])
            }
        }
    }
}
</script>

Answer 1

解决方案：

需要添加：

<link href="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css" rel="stylesheet">

在顶部