在vue中如何正確安裝與使用
1、 先安裝
npm install mapbox-gl --save
2、在單頁(yè)中引用
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
注意1: 無(wú)需在main.js做全局引入；
注意2: 一定要引入樣式朗伶，否則有些東西顯示不出來(lái)，比如說(shuō)放大縮小的導(dǎo)航控制條步咪；
mapbox-gl在vue中怎樣實(shí)現(xiàn)中文顯示
1论皆、 安裝@mapbox/mapbox-gl-language
npm install @mapbox/mapbox-gl-language --save
2、 在單頁(yè)中引用
import MapboxLanguage from '@mapbox/mapbox-gl-language'
3猾漫、 在初始化地圖方法中設(shè)置語(yǔ)言
var language = new MapboxLanguage({ defaultLanguage: "zh" });
this.map.addControl(language);
添加導(dǎo)航控制條
var nav = new mapboxgl.NavigationControl();
this.map.addControl(nav, 'bottom-right');
000.png
隱藏mapbox商標(biāo)信息
// 隱藏mapbox商標(biāo)
.mapboxgl-ctrl-logo {
display: none;
}
image.png
完整代碼 && 效果圖
<template>
<div class="mapbox-maps">
<div id="map"></div>
</div>
</template>
<script>
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css' // 一定要引入樣式点晴， 否則有些東西顯示不出來(lái)(比如導(dǎo)航控制條)
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
})
// 設(shè)置語(yǔ)言
var language = new MapboxLanguage({ defaultLanguage: "zh" });
this.map.addControl(language);
// 導(dǎo)航控制條
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商標(biāo)
.mapboxgl-ctrl-logo {
display: none;
}
}
}
</style>
001.png
