快速开始
本指南将帮助你在 5 分钟内创建第一个 MapboxGL 地图。
1. 引入 MapboxGL
通过 CDN 引入
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>我的第一个地图</title>
<!-- Mapbox GL JS -->
<script src="https://cdn.jsdelivr.net/npm/mapbox-gl@3.7.0/dist/mapbox-gl.min.js"></script>
<!-- Mapbox GL CSS -->
<link href="https://cdn.jsdelivr.net/npm/mapbox-gl@3.7.0/dist/mapbox-gl.min.css" rel="stylesheet">
<style>
body { margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// 初始化地图
const map = new mapboxgl.Map({
container: 'map', // 容器 ID
style: 'mapbox://styles/mapbox/streets-v12', // 地图样式
center: [116.3974, 39.9093], // 初始中心点 [经度, 纬度]
zoom: 11 // 初始缩放级别
});
</script>
</body>
</html>通过 npm 安装
bash
npm install mapbox-gljavascript
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v12',
center: [116.3974, 39.9093],
zoom: 11
})2. 获取访问令牌
要使用 MapboxGL，你需要一个有效的访问令牌：
- 注册 Mapbox 账户
- 创建访问令牌
- 在代码中设置令牌：
javascript
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN'注意
不要将访问令牌提交到公共代码仓库。使用环境变量存储敏感信息。
3. 完整示例
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>我的地图</title>
<script src="https://cdn.jsdelivr.net/npm/mapbox-gl@3.7.0/dist/mapbox-gl.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/mapbox-gl@3.7.0/dist/mapbox-gl.min.css" rel="stylesheet">
<style>
body { margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// 设置访问令牌
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN'
// 初始化地图
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v12',
center: [116.3974, 39.9093],
zoom: 11,
bearing: 0,
pitch: 0
})
// 添加导航控件
map.addControl(new mapboxgl.NavigationControl())
// 添加标记
new mapboxgl.Marker()
.setLngLat([116.3974, 39.9093])
.setPopup(new mapboxgl.Popup().setHTML('<h3>北京</h3><p>欢迎来到北京!</p>'))
.addTo(map)
</script>
</body>
</html>4. 常用配置选项
| 选项 | 类型 | 说明 |
|---|---|---|
container | string | 地图容器的 ID |
style | string | 地图样式 URL |
center | Array | 初始中心点 [经度, 纬度] |
zoom | number | 初始缩放级别 (0-22) |
bearing | number | 地图旋转角度 (0-360) |
pitch | number | 地图倾斜角度 (0-85) |