小白的mapbox学习之路-显示地图

解锁你的mapbox

1 在头部中引入相关链接

<script src='https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css' rel='stylesheet' />

2 body中定义一个div用来显示地图

<div id='map' style='width: 100%; height: 100%;'></div>

3 script中创建map对象，并设置相关的参数

mapboxgl.accessToken = 'pk.eyJ1IjoiYWx5c3NhLTE5OTciLCJhIjoiY2tiajRmNG96MGxxNjJxbWJ1MXBnZzIwbiJ9.SRp4xEaZP7rHmStuLyuugA';
var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
        center: [116.20, 39.56], // starting position [lng, lat]我设置的是北京的经纬度
        zoom: 9, // starting zoom
    });

注意 : accessToken需要注册登录后获得自己的token

官方链接: https://www.mapbox.cn/mapbox-gl-js/api/.