<template>
  <div class="mapBox">
<!--    使用高德地图的组件-->
    <el-amap vid="amapDemo" :zoom="zoom" :center="center" style="height: 600px">
<!--      el-amap-marker>: 通过v-for指令循环遍历markers数组，-->
<!--      并为每个标记创建一个el-amap-marker组件，将标记的位置(position)绑定到数组中的相应数据。-->
      <el-amap-marker
        v-for="marker in markers"
        :position="marker.position"
        :events="marker.events"
        :key="marker.index"
      ></el-amap-marker>
      <el-amap-info-window
        v-for="window in windows"
        :offset="window.offset"
        :position="window.position"
        :content="window.content"
        :open="window.open"
        :key="window.index"
      ></el-amap-info-window>
    </el-amap>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      // 单位信息
      unit: "xxxxx政府司法局",
      address: "xx省xx市xxxxx大道东433号",
      // markers和windows数组用于存储地图标记和信息窗口的数据结构。
      markers: [],
      windows: [],
      center: [116.39, 39.9],
      zoom: 16,
      // currentPosition: null, // 新增一个用于存储当前经纬度的变量
      label: {
        content: "自定义标题",
        offset: [10, 12],
      },
    };
  },
  async mounted() {
    this.initMap();
  },
  methods: {
    // 初始化地图
    initMap(map) {
      this.markers.push({
        // position: [116.407387, 39.904179],
        position: [116.39, 39.9],
        // position: this.currentPosition,
      });

      this.windows.push({
        position: [116.39, 39.9],
        // position: this.currentPosition,
        content:
          "<h2 style='font-weight: bold;width: 400px;margin: 10px'>" +
          this.unit +
          "</h2>" +
          "<div style='margin: 10px'>" +
          "地址：" +
          this.address +
          "</div>",
        offset: [0, -20],
        open: true,
      });

      // var map = new AMap.Map("container", {
      //   zoomEnable: true, //是否禁止缩放
      //   zoom: 12, //缩放比例
      //   dragEnable: false, //禁止拖动
      //   cursor: "hand", // 鼠标在地图上的表现形式，小手
      // });
      // // 初始化工具条
      // map.plugin(["AMap.ToolBar"], function () {
      //   map.addControl(new AMap.ToolBar());
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
.mapBox {
  position: relative;
  width: 100%;
  height: 600px;
}
</style>
