vue3中使用Mapbox

在Vue 3中使用Mapbox，你可以按照以下步骤进行操作：

1. 首先，你需要在Vue项目中引入Mapbox的JavaScript SDK。你可以通过在HTML文件中插入以下代码来实现：

<script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' />

2. 接下来，在Vue组件中创建一个地图容器，并在mounted钩子函数中初始化地图。你可以使用mapbox-gl库提供的API来实现。下面是一个简单的示例：

<template>
  <div ref="mapContainer" class="map-container"></div>
</template>

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

export default {
  mounted() {
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; // 替换为你自己的Mapbox访问令牌

    const map = new mapboxgl.Map({
      container: this.$refs.mapContainer,
      style: 'mapbox://styles/mapbox/streets-v11', // 替换为你想要的地图样式
      center: [longitude, latitude], // 设置地图初始中心点的经纬度
      zoom: 12 // 设置初始缩放级别
    });
  }
}
</script>

<style>
.map-container {
  height: 400px;
}
</style>

在上面的示例中，我们首先将Mapbox的访问令牌设置为`YOUR_MAPBOX_ACCESS_TOKEN`，请确保替换为你自己的Mapbox访问令牌。然后，在mounted钩子函数中，我们创建了一个地图实例，并将其绑定到组件的ref属性上的DOM元素。我们还可以设置地图的样式、初始中心点的经纬度和缩放级别。

这只是一个简单的示例，你可以根据自己的需求进一步自定义地图的样式和功能。你可以探索Mapbox的文档以了解更多可用的API和功能。

希望这个回答能够帮助到你！