在vue 中使用maxBox

1、 先安装

npm install mapbox-gl --save

2、在单页中引用

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

3、语言包安装和使用

npm install @mapbox/mapbox-gl-language --save

单页面中使用

import MapboxLanguage  from '@mapbox/mapbox-gl-language'

在初始化地图方法中设置语言

var language = new MapboxLanguage({ defaultLanguage: "zh" });
this.map.addControl(language);

添加导航控制条

var nav = new mapboxgl.NavigationControl();
this.map.addControl(nav, 'bottom-right');

隐藏mapbox商标信息

// 隐藏mapbox商标
.mapboxgl-ctrl-logo {
    display: none;
}

完整代码

<template>
    <div class="mapbox-maps">
        <div id="map"></div>  
    </div>
</template>

<script>
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css' // 一定要引入样式， 否则有些东西显示不出来(比如导航控制条)
import MapboxLanguage  from '@mapbox/mapbox-gl-language'
export default {
    data: () => ({
        map: null
    }),

    methods: {
        initMap() {
            this.map = new mapboxgl.Map({
                accessToken: '你自己的token',
                container: 'map',
                style: 'mapbox://styles/mapbox/streets-v11',
                center: [116.3972282409668, 39.90960456049752],
                zoom: 18,
                antialias: false,
                attributionControl: false  
            })

            // 设置语言
            var language = new MapboxLanguage({ defaultLanguage: "zh-Hans" });
            this.map.addControl(language);

            // 导航控制条
            var nav = new mapboxgl.NavigationControl();
            this.map.addControl(nav, 'bottom-right');

        }
       
    },
    mounted() {
        this.initMap()
    }  
}
</script>

<style lang="scss">
.mapbox-maps {
    width: 100%;
    height: calc(100vh - 50px);
    position: relative;
    #map {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        bottom:0;
        right: 0;
        .mapboxgl-canvas {
            outline: none;
        }
        // 隐藏mapbox商标
        .mapboxgl-ctrl-logo {
            display: none;
        }
    }
}
    
</style>