How to add dynamic markers to MapBox using Vue/Nuxt?答案

【问题标题】：How to add dynamic markers to MapBox using Vue/Nuxt?How to add dynamic markers to MapBox using Vue/Nuxt?
【发布时间】：2022-12-26 23:10:24
【问题描述】：

So I got my MapBox going, and would like to dynamically add markers (using vue/nuxt). For some reason, the markers will not appear on the map, and I do not know why.

As you can see from the code below, console.log() prints the correct coordinates, so this really got me confused.

Any ideas?

Code:

<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>

【问题讨论】：

标签： vue.js nuxt.js mapbox-gl

【解决方案1】：

SOLUTION:

Needed to add:

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

In the top

【讨论】：

【解决方案2】：

I was trying to do something similar and tried the solution you mentioned, adding the link tag. But it doesn't seem to work. Can you mention if there is something wrong in the code below -

<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.2,
    Longitude: 8.6,
    Value: 10.0,
  },
  {
    TurbineName: "Unit 2",
    InstallationID: 101,
    PriceArea: "DK1",
    Latitude: 56.3,
    Longitude: 8.6,
    Value: -20.0,
  },
  {
    TurbineName: "Unit 3",
    InstallationID: 102,
    PriceArea: "DK1",
    Latitude: 56.4,
    Longitude: 8.6,
    Value: -30.0,
  },
];

export default {
  name: "MapBox",
  link: [
    {
      rel: "stylesheet",
      href: "https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css",
    },
  ],
  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>

【讨论】：