vue中展示mapbox地圖

1，vue中安裝mapbox

cnpm i mapbox-gl -S

2,main.js中引入

import mapBoxGl from 'mapbox-gl'
Vue.prototype.$mapboxgl = mapBoxGl

3.展示地圖

<!-- mapbox -->
<template>
  <div id="map"></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  components: {},
  created() {},
  mounted() {
    this.initmap();
  },
  computed: {},
  methods: {
    initmap() {
      this.$mapboxgl.accessToken =
        "pk.eyJ1IjoibGlqaWFuZ2ppYW5namlhbmciLCJhIjoiY2s2b2czbmltMG14cDNkbXpldjhkd3c3ZiJ9.zBaMzJo2X2UVPyFTtd5hEQ";
      var map = new this.$mapboxgl.Map({
        container: "map",
        style: "mapbox://styles/mapbox/streets-v11",
        center: [104.07, 30.67],
        zoom: 5,
        // pitch: 60, //視野傾斜，0-60
        // bearing: -17.6,//視野旋轉角度
      });

      //註冊點擊事件
      map.on("click", function(e) {
        console.log("點擊");
      });
    }
  }
};
</script>

<style lang="scss">
#map {
  height: 500px;
  // border: 1px solid red;
}
</style>

4，效果展示