<template>
  <div class="top-line df aic jcsb p10">
    <div>
      <div class="fs20 mb10">汇很多船务公司</div>
      <div class="df aic">
        <div class="mr10">{{ today }}</div>
        <div>天气</div>
      </div>
    </div>
    <div>
      <div>所有船舶数量:</div>
      <div>所有船舶吨位:</div>
    </div>
  </div>
  <div id="map-container" class="map-container"></div>
</template>
<script setup>
import moment from "moment";
import "moment/dist/locale/zh-cn";
import { onMounted, ref } from "vue";

let today = ref(moment().format("YYYY年MM月DD日 dddd"));

const map = ref({});
function initMap() {
  map.value = new AMap.Map("map-container", {
    zoom: 9, //级别
    zooms: [4, 9],
    center: [120.563757, 31.891174], //中心点坐标
    mapStyle: "amap://styles/f48d96805f5fa7f5aada657c5ee37017",
    zoomEnable: true,
    dragEnable: true,
  });
  let toolBar = new AMap.ToolBar({
    position: {
      top: "40px",
      right: "40px",
    },
  });
  let hawkEye = new AMap.HawkEye({
    opened: false,
  });
  map.value.addControl(toolBar);
  map.value.addControl(hawkEye);
}

onMounted(() => {
  initMap();
});

navigator.geolocation.getCurrentPosition(showPosition, showError);
function showPosition(position) {
  console.log(position);
}
function showError(position) {
  console.log(position);
}
</script>
<style scoped>
.map-container {
  width: 100%;
  height: calc(100% - 81px);
}
</style>
