<template>
  <div class="viewPositionIdx">
    <s-header
      :name="sys ? sys.title : $t('device.equipLocation')"
      :noback="false"
    ></s-header>
    <div class="o-w" id="container"></div>
  </div>
</template>

<script>
import sHeader from "@/components/SimpleHeader";
// 引入高德地图的jsloader
import AMapLoader from "@amap/amap-jsapi-loader";
import { onMounted, ref } from "@vue/runtime-core";
import { useRoute } from "vue-router";
export default {
  components: { sHeader },
  setup() {
    // 引入路由
    const route = useRoute();
    // 设置经纬度
    const position = ref({});
    onMounted(() => {
      position.value = route.query || {};
    });
    AMapLoader.load({
      key: "5572fbf57440ce5d5f220a52dc7eab23",
      version: "2.0",
      plugins: [],
      AMapUI: {
        version: "1.1",
        plugins: ["overlay/SimpleMarker"],
      },
      Loca: {
        version: "2.0",
      },
    })
      .then((AMap) => {
        const map = new AMap.Map("container", {
          center: [position.value.longitude, position.value.latitude],
          zoom: 14,
          resizeEnable: true,
          features: ["bg", "road", "building", "point"],
        });
        const icon = new AMap.Icon({
          image: require("../../../assets/device/location.png"),
          imageSize: new AMap.Size(30, 40),
        });
        const marker = new AMap.Marker({
          position: new AMap.LngLat(
            position.value.longitude,
            position.value.latitude
          ),
          icon,
          title: position.value.fullName,
          // label: {
          //   direction: "top",
          //   content: position.value.fullName,
          // },
        });
        map.add(marker);
      })
      .catch((e) => {
        console.error(e); //加载错误提示
      });
    return {};
  },
};
</script>

<style lang="less" scoped>
.viewPositionIdx {
  :deep(.amap-marker-label)  {
    border: none;
    padding: 5px;
    border-radius: 10px;
    background-color: #4d6add;
    color: #fff;
  }
  #container {
    height: calc(100% - 44px);
  }
}
</style>