<template>
  <div style="width:100%; height: 100%;">
  
    <div class="mapContainer" id="showMapContainer"></div>
    <SearchMenu></SearchMenu>
    <ResourceMenu></ResourceMenu>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from "vue"
import mapboxgl, { Map, Popup } from 'mapbox-gl';
import { MapboxConfig, MapboxDefaultStyle, MapControlConfig } from '@/components/MapboxMaps/src/config.ts'
import SearchMenu from './SearchMenu/index.vue'
import ResourceMenu from './ResourceMenu/index.vue'
let map: Map;
onMounted(() => {
  mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
  map = initMap();
})
onUnmounted(() => {
  map && map.remove();
})
const initMap = () => {
  return new mapboxgl.Map({
    container: 'showMapContainer',
    language: 'zh-cmn',
    projection: 'equirectangular', // wgs84参考系
    style: MapboxDefaultStyle,
    maxZoom: 22,
    minZoom: 6,
    zoom:10,
    // ...props.mapOptions,
    center:[117.984425,35.270654],
  });
};
</script>

<style lang="scss" scoped>
.mapContainer{
  width: 100%;
  height: 100%;
}
:deep(.mapboxgl-control-container){
  display: none;
}
</style>
