vue mapbox 地图 demo

执行以下命令：

npm install --save mapbox-gl
// cnpm install --save mapbox-gl

<template>
  <div style="width: 600px;height: 200px;">
    <div ref="basicMapbox" :style="mapSize" id="map"></div>
  </div>
</template>
<script>
  export default {
    props: {
      mapWidth: {
        type: String
      },
      mapHeight: {
        type: String
      }
    },
    data () {
      return {
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      // 初始化
      init () {
        let mapboxgl = require('mapbox-gl/dist/mapbox-gl.js');
        mapboxgl.accessToken = 'pk.eyJ1IjoiMTU2MDA1ODc1MzEiLCJhIjoiY2pqemo4em01YXoyaTN2bGZ0YnhyNWhrayJ9.cBK7DuuLXgb4Pu-2g_eRAQ';
        let map = new mapboxgl.Map({
          container: this.$refs.basicMapbox,
          style: 'mapbox://styles/mapbox/streets-v10',
          zoom: 13,
          center: [4.899, 52.372]
        })
      }
    },
    computed: {
      mapSize () {
        let styleObj = {
          width: this.mapWidth,
          height: this.mapHeight
        }
        return styleObj
      }
    }
  }
</script>
<style>
  @import url('https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css');
</style>