如何使用 vuejs 创建 mapbox gl答案

【问题标题】：How to create mapbox gl with vuejs如何使用 vuejs 创建 mapbox gl
【发布时间】：2020-07-03 07:42:21
【问题描述】：

<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 地图，但它显示空白屏幕

I have tried with this link but it didnt worked

我不知道我错过了什么清楚地显示我的空白屏幕

【问题讨论】：

标签： vue.js mapbox-gl-js

【解决方案1】：

这是使用 Vue 2 集成 mapbox 应用程序的简单方法。此示例不需要 NPM 或 import 语句。我会小心在公共论坛上包含您的 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>

【讨论】：