vue使用mapbox

Vue 使用 Mapbox 可以通过以下步骤实现：

1. 首先，在你的 Vue 项目中安装 Mapbox 的 JavaScript SDK 包。可以使用 npm 或 yarn 进行安装：

npm install mapbox-gl

2. 在你的 Vue 组件中，引入 Mapbox 的 JavaScript SDK：

import mapboxgl from 'mapbox-gl'

3. 创建一个地图容器，并在组件的 mounted 钩子函数中初始化地图：

export default {
  mounted() {
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN' // 替换为你自己的 Mapbox Access Token
    const map = new mapboxgl.Map({
      container: 'map-container', // 地图容器的 id
      style: 'mapbox://styles/mapbox/streets-v11', // 地图样式
      center: [longitude, latitude], // 地图中心点的经纬度
      zoom: 12 // 初始缩放级别
    })
  }
}

4. 在组件的 template 中添加一个地图容器元素：

<template>
  <div id="map-container"></div>
</template>

5. 这样就可以在 Vue 组件中使用 Mapbox 了。你可以根据 Mapbox 的文档和 API 来添加标记、绘制路线等其他功能。

请注意，上述代码中的 `YOUR_MAPBOX_ACCESS_TOKEN` 需要替换为你自己的 Mapbox Access Token。另外，根据你的需求，还可以进一步配置地图样式、中心点和缩放级别等参数。