在vue中如何正确安装与使用
1、 先安装
npm install mapbox-gl --save
2、在单页中引用
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
注意1: 无需在main.js做全局引入;
注意2: 一定要引入样式,否则有些东西显示不出来,比如说放大缩小的导航控制条;
mapbox-gl在vue中怎样实现中文显示
1、 安装@mapbox/mapbox-gl-language
npm install @mapbox/mapbox-gl-language --save
2、 在单页中引用
import MapboxLanguage from '@mapbox/mapbox-gl-language'
3、 在初始化地图方法中设置语言
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-v9',
center: [116.3972282409668, 39.90960456049752],
zoom: 18,
antialias: false,
attributionControl: false
})
// 设置语言
var language = new MapboxLanguage({ defaultLanguage: "zh" });
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>