无法向mapbox Nuxt3/Vue3添加地图控件进行缩放

Question

我创建了一个新的 Nuxt3 应用程序，并且正在使用 Mapbox。

我在我创建的

Map.vue

组件中渲染了地图，但我无法向其添加控件和其他选项。我只是无法显示控件。

这是我的组件代码。任何帮助将不胜感激。

<template>
  <div id="map" class="h-full"></div>
</template>
<script setup lang="ts">
  import { onMounted, defineProps } from 'vue';
  import axios from 'axios';
  import mapboxgl from 'mapbox-gl';
  import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';

  const props = defineProps({
    mapCoords: {
      type: Array,
      default: () => []
    }
  })

  onMounted(() => {
    createMap();
  })

  function createMap() {
    mapboxgl.accessToken = 'xxxxxxxxxxx';
    let map = new mapboxgl.Map({
      container: 'map',
      center: props.mapCoords,
      style: 'mapbox://styles/mapbox/streets-v11',
      zoom: 12
    });

    map.addControl(new mapboxgl.NavigationControl());
  }
</script>
<style>
@import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
</style>

我的 IDE 中也针对中心选项收到此类型的

unknown

警告。

Answer 1

您可能已经解决了这个问题，但也许其他人也有类似的问题：mapCoords属性的类型需要从Array更改为[number, number]。

  const props = defineProps({
    mapCoords: {
      type: [number, number],
      default: () => [0, 0]
    }
  })

Answer 2

您需要从此按钮加载 CSS 文件

在你的代码中尝试这个

导入'mapbox-gl/dist/mapbox-gl.css';