文章目录

• 前言
• 一、mapbox是什么？
• • 官网
  • 官网示例效果尝鲜
• 二、使用步骤
• • 1.引入mapbox-gl.js库
  • • 在线库
    • npm 形式安装
  • 2.使用方法
  • • 无账号则申请，有账号则登录
    • 申请完成后，获取token
    • 创建一个地图元素容器
    • 使用token并配置
    • 创建一个地图示例
• 效果
• 总结

前言

最近开始入坑前端mapbox地图，跟大家一起慢慢深入学习mapbox

一、mapbox是什么？

官网

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

Mapbox GL JS 是一个客户端JavaScript库，用于使用Mapbox的现代地图技术构建web地图和web应用程序。您可以使用Mapbox GL JS在web浏览器或客户端中显示Mapbox地图，添加用户交互性，并在应用程序中定制地图体验。

官网示例效果尝鲜

二、使用步骤

1.引入mapbox-gl.js库

在线库

npm 形式安装

npm install --save mapbox-gl

然后引入

import 'mapbox-gl/dist/mapbox-gl.css';
import mapboxgl from 'mapbox-gl';

2.使用方法

无账号则申请，有账号则登录

申请地址：https://account.mapbox.com/auth/signup/

申请完成后，获取token

创建一个地图元素容器

使用token并配置

mapboxgl.accessToken = '<输入你的token>';

创建一个地图示例

const map = new mapboxgl.Map({container: 'map', // 地图容器 IDstyle: 'mapbox://styles/mapbox/streets-v12', // 样式urlcenter: [116.42396,39.91784], // 中心位置[lng, lat]zoom: 16, // 缩放pitch: 35, // 倾斜角度
});

Map配置项

完整代码（实例）

效果

总结

以上就是今天要讲的内容，本文仅仅简单介绍了mapbox-gl.js的使用，而mapbox-gl.js提供了非常多的地图功能，后续文章，我将带大家慢慢深入了解。

如果觉得有用欢迎点赞关注
有问题私信我！！~~