准备工作

申请 accessToken

accessToken = ''
 search = 'https://api.mapbox.com/geocoding/v5/mapbox.places/{{searchValue}}.json?access_token=pk.eyJ1IjoibWluZ2p1IiwiYSI6ImNrY3llOWsyZDA4ejkydW8zdDVsaWp2aXgifQ.N5PsVkGAgakL2SH-7oWUrw'  // 搜索请求

安装第三方库

yarn add mapbox-gl
yarn add @mapbox/mapbox-gl-language  // 切换语言包

<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.css" type="text/css"/>  // yarn 安装引入报错

初始化

import React, {Component} from 'react'
import mapGl from 'mapbox-gl'
import MapboxLanguage from '@mapbox/mapbox-gl-language'

export class Map extends Component {
    accessToken = ''
    
    state = {
        center: [116, 39],  // 初始化坐标
        map: null,
    }
    
    fullScreen = () => {
        // 返回全屏控件实例 
        return new mapGl.FullscreenControl()
    }
    
    language = () => {
        return new MapboxLanguage({
            defaultLanguage: 'zh'  // 设置默认语言
        })
    }
    mapInit = () => {
        mapGl.accessToken = this.accessToken
        const map = new mapGl.Map({
            style: 'mapbox://styles/mapbox/streets-v10',  // 引入样式
            center: this.state.center,  // 地址中心经纬度
            container: 'map',  // 容器
            zoom: 13,  // 缩放比例
        })
        map.addControl(this.fullScreen())  // map.addControl, 添加控件实例到 map 上
        map.addControl(this.language())
        this.setState({map})  // 将 map 实例保存到 state 中
    }
    componentDidMount() {
        this.mapInit()
    }
    render() {
        return {
            <div id='map' className='map'></div>
        }
    }
}

还有样式文件, 我就没写了哈, 暂时只实现了导航, 搜索和定位的功能