Mapbox GL JS 入门指南：如何正确获取并使用有效的 Access Token

1次阅读

共计 1745 个字符，预计需要花费 5 分钟才能阅读完成。

Mapbox GL JS 是一个功能强大的地图库，但在使用前必须配置有效的 Access Token。很多新手开发者在使用 Mapbox GL JS 时，经常会遇到以下问题：

未正确配置 Access Token，导致地图无法加载
使用了无效或过期的 Token，导致初始化失败
未设置正确的域名授权，导致 Token 无法使用

这些问题通常会在控制台报错：”A valid Mapbox access token is required to use Mapbox GL JS”。理解如何正确获取和使用 Access Token 是使用 Mapbox GL JS 的第一步。

与其他地图库相比，Mapbox 的 Access Token 机制有一些独特之处：

Google Maps API：使用 API 密钥，通常只需要一个密钥即可访问所有服务
Mapbox：使用 Access Token，可以创建多个 Token 并设置不同的权限和限制
Leaflet：通常不需要 Token，但功能相对简单

Mapbox 的 Token 机制提供了更细粒度的控制，但同时也增加了配置的复杂性。

访问 Mapbox 官网
点击 “Sign up” 注册新账号
完成邮箱验证

登录后进入 Account 页面
在左侧菜单选择 “Access tokens”
点击 “Create a token” 按钮
设置 Token 名称和权限
点击 “Create token” 完成创建

检查 Token 是否启用
确认 Token 有足够的权限
检查 Token 的域名限制设置

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <title>Mapbox GL JS 示例 </title>
  <meta name='viewport' content='width=device-width, initial-scale=1' />
  <!-- 引入 Mapbox GL JS 库 -->
  <script src='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js'></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css' rel='stylesheet' />
  <style>
    body {margin: 0; padding: 0;}
    #map {position: absolute; top: 0; bottom: 0; width: 100%;}
  </style>
</head>
<body>
  <div id='map'></div>
  <script>
    // 设置你的 Mapbox Access Token
    mapboxgl.accessToken = '你的 AccessToken';

    // 初始化地图
    const map = new mapboxgl.Map({
      container: 'map', // 容器 ID
      style: 'mapbox://styles/mapbox/streets-v11', // 地图样式
      center: [116.404, 39.915], // 初始中心点 [经度, 纬度]
      zoom: 13 // 初始缩放级别
    });
  </script>
</body>
</html>