如何使用 vuejs 创建 mapbox gl

Question

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<MglMap :accessToken="accessToken" :mapStyle="mapStyle" />
</template>
<script>
import Mapbox from "mapbox-gl";
import { MglMap } from "vue-mapbox";
export default {
components: {
MglMap
},
data() {
return {
accessToken: "pk.eyJ1IjoiYWlzaHdlcnlhIiwiYSI6ImNrYzVyYXBlNzBrZGgzMG8wc3FtZjU5NDAifQ.u4azaXjkh41xSMC1NJLhTw", // your access token. Needed if you using Mapbox maps
mapStyle: "mapbox://styles/aishwerya/ckc5ufmlw0nu11ip289o79bkl" // your map style
};
},
created() {
// We need to set mapbox-gl library here in order to use it in template
this.mapbox = Mapbox;
}
};
</script>

我创建了mapbox-gl地图，但它显示空白屏幕

我尝试过使用此链接，但它不起作用

我不知道我错过了它清楚地向我显示空白屏幕

Answer 1

这是使用 Vue 2 集成 mapbox 应用程序的简单方法。 此示例不需要 NPM 或导入语句。我会小心在公共论坛上包含您的 api 密钥。 我已经包含了您的 api 密钥，以便此示例正常工作。

<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<style>
#project { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
<div id="project"></div>
<script>
var mapping = new Vue({
el: '#project', 
data: {
map: ''
}, 
mounted(){           
mapboxgl.accessToken = 'pk.eyJ1IjoiYWlzaHdlcnlhIiwiYSI6ImNrYzVyYXBlNzBrZGgzMG8wc3FtZjU5NDAifQ.u4azaXjkh41xSMC1NJLhTw';

//create a new mapbox instance           
this.map = new mapboxgl.Map({
container: 'project',
'style' : 'mapbox://styles/mapbox/light-v10'
});
//fit the united states to the screen
this.map.fitBounds([[-135, 47], [-60, 25]]);
}
});
</script>