首先引入依赖
- 地图包
npm install --save mapbox-gl
- 语言包
npm install --save mapbox-gl @mapbox/mapbox-gl-language
初始化地图
<div id="map"></div>
<----这里必须用id来创建容器----->
import mapboxgl from 'mapbox-gl'; // or "const mapboxgl = require('mapbox-gl');"
mapboxgl.accessToken = 'pk.eyJ1IjoiZGFpc3ktYmVlIiwiYSI6ImNqeHRzbDMzNTB4cGwzY3FtcTB3dzE3MXgifQ.gUTqZURLqh4DFSWN7u_8-Q'; // 这个是token可自己申请使用也可以直接用这个
const map = new mapboxgl.Map({
container: 'map', // 容器id
style: 'mapbox://styles/mapbox/streets-v12', // 设置底图
center: [-74.5, 40], // 视图中心坐标,采用 [lng, lat] 格式
zoom: 9, // 视图开始层级,设置此处可以设置初始地图层级大小
});