<template>
  <div class="map_main">
    <div :id="mapId" style="height: 100%"></div>
  </div>
</template>

<script>
let map
export default {
  name: "wMap",
  props: ["mapId"],
  components: {},
  data() {
    return {};
  },
  mounted() {
  },
  methods: {
    initMap() {
      mapboxgl.accessToken = 'pk.eyJ1IjoibmluZ2x4IiwiYSI6ImNsYnlnM2s2ODBnNmIzcHBpbzY5aDh3bHAifQ.hQL4zLjBss5i4x-zuFp9tg'
      map = new mapboxgl.Map({
        container: this.mapId,
        style: map_config.MAP_STYLE,
        center: map_config.MAP_CENTER,
        zoom: map_config.MAP_ZOOM,
        maxZoom: map_config.MAX_ZOOM,
        pitch: map_config.MAP_PITCH,
      });
      map.rotateTo(map_config.MAP_ROTATE);
      return map;
    }
  },
  computed: {},
  beforeDestroy() {
  },
};
</script>

<style scoped>
.map_main {
  height: 100%;
  position: relative;
}

#map {
  height: 100%;
}
</style>
<style>
.mapboxgl-ctrl-attrib {
  display: none;
}

</style>
