# mapbox示例

**Repository Path**: hyssiu/mapbox-example

## Basic Information

- **Project Name**: mapbox示例
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-08
- **Last Updated**: 2026-06-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 Mapbox 简单使用示例

这是一个适合新手看的 Vue 3 + 组合式 API + Mapbox GL JS 示例。

Mapbox 不需要搭配模型也可以使用。最基础的用法就是：加载地图、设置中心点、添加控件、添加标记点和弹窗。只有你要做 3D 模型、数字孪生、三维场景时，才需要考虑模型相关内容。

## 准备 Mapbox token

1. 打开 Mapbox 官网并登录。
2. 进入 Access tokens 页面。
3. 复制一个以 `pk.` 开头的 public token。
4. 在本项目根目录新建 `.env` 文件，内容参考 `.env.example`：

```bash
VITE_MAPBOX_TOKEN=你的_mapbox_public_token
```

修改 `.env` 后，需要重新运行 `npm run dev`。

## 安装依赖

```bash
npm install
```

## 启动项目

```bash
npm run dev
```

启动后，打开终端里显示的本地地址。

## 核心代码在哪里

主要看 `src/App.vue`：

- `ref` 保存地图容器 DOM
- `shallowRef` 保存 Mapbox 地图实例
- `onMounted` 初始化地图
- `onBeforeUnmount` 销毁地图实例
- `new mapboxgl.Marker()` 添加标记点
- `new mapboxgl.Popup()` 添加弹窗

官方文档入口：

- https://docs.mapbox.com/mapbox-gl-js/
- https://docs.mapbox.com/mapbox-gl-js/guides/install/