<template>
  <div class="mapPage">
    <div id="container"></div>
  </div>
</template>

<script setup name="PanoramaMap">
import { ref, reactive, toRefs, onMounted } from 'vue';

const AllData = reactive({
  panorama: null,
});
// 初始化街景地图
const initePanoramaMap = () => {
  AllData.panorama = BMapGL.Panorama('container');
  AllData.panorama.setPosition(new BMapGL.Point(116.40385, 39.913795));
  AllData.panorama.setPov({
    // 修改全景的视角
    pitch: 10,
    heading: 140,
  });
  AllData.panorama.setOptions({
    linksControl: true, // 隐藏道路指示控件，默认true
    navigationControl: true, // 隐藏导航控件，默认true
  });
};
onMounted(() => {
  initePanoramaMap();
});
onBeforeUnmount(() => {});
</script>

<style lang="scss" scoped>
.mapPage {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 0;
  background: lavender;
}

#container {
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>