高德地图信息框作为组件

<template>
  <div>
    <el-button>{{id}}btn</el-button>
    <el-card class="box-card" style="padding: 0 80 30 80;width: 400px;border-radius: 10px;">
      <div id="del-div">
        <el-link type="primary" icon="el-icon-close" @click="close()"></el-link>
      </div>
      <div style="text-align: center;">
        <h4>详 情</h4>
      </div>
      <p v-if="isInfo">部署 : 测试一下</p>
      <p v-if="isInfo">地点 : 测试一下2222</p>
      <p v-if="isInfo">说明 : 测试一下111111</p>
      <p v-if="!isInfo" style="text-align: center;color: #b3b3b3;">暂无信息</p>
      <div id="infoWindowTool">
        <el-link type="primary" @click="edit()">编辑</el-link>
        <el-link type="primary" @click="del()">删除</el-link>
      </div>
    </el-card>
    <div class="amap-info-sharp">
      <i class="el-icon-caret-bottom"></i>
    </div>
 
  </div>
</template>
<script>
export default {
  data() {
    return {
      overlay: null,
      infoWindow: null,
      isInfo: true,
      id:""
    };
  },
  methods: {
    initialize(e) {
      this.overlay = e.overlay;
      this.infoWindow = e.infoWindow;
      this.id = e.id,
      console.log(this.id)
    },
    //关闭
    close() {
      this.infoWindow.close();
    },
    edit() {
      console.log("编辑按钮测试");
    },
    del() {
      console.log("删除按钮测试");
    }
  }
};
</script>
 
<style lang="css" scoped>
.amap-info-sharp {
  bottom: -1px;
  left: 48.5%;
  position: absolute;
  color: #fff;
  z-index: -1;
}
#del-div {
  position: absolute;
  right: 20;
  top: 20;
  transform: scale(1.2);
}
</style>

<template>
  <div>
    <div id="GDMap" style="height: calc(100vh - 100px)"></div>
    <infoWindowComponent ref="infoWindowComponent"></infoWindowComponent>
  </div>
</template>

<script>
import loadMap from "@/assets/js/loadMap.js";
import infoWindowComponent from "./mapInfoCom.vue"

export default {
  components:{infoWindowComponent},
  data() {
    return {
      DialogVisible: false,
      key: "3862bb74758c8d185100ed5df030949d",
      plugins: [
        "AMap.Autocomplete",
        "AMap.PlaceSearch",
        "AMap.OverView",
        "AMap.MouseTool",
        "AMap.PolyEditor",
        "AMap.RectangleEditor",
        "AMap.DistrictLayer",
        "AMap.CustomLayer",
      ],
      v: "1.4.4",
      GDMap: null,
      lnglats: [
        { id:1,position: [119.98186101, 31.77139674], flag: 0, state: 1 },
        { id:2,position: [119.98186101, 31.76139674], flag: 0, state: 2 },
        { id:3,position: [119.99186101, 31.76139674], flag: 0, state: 3 },
        {
          id:4,
          position: [119.97186101, 31.76139674],
          flag: 1,
          state: 4,
          label: "小王",
        },
        {
          id:5,
          position: [119.96186101, 31.76139674],
          flag: 1,
          state: 4,
          label: "小李",
        },
      ],
    };
  },
  methods: {
    showMap() {
      loadMap(this.key, this.plugins, this.v)
        .then((AMap) => {
          this.GDMap = new AMap.Map("GDMap", {
            zoom: 10,
            resizeEnable: true,
            keyboardEnable: false,
          });
          this.GDMap.on("complete", () => {
            this.showMarker();
          });
        })
        .catch(() => {
          console.log("地图加载失败！");
        });
    },
    showMarker() {
      let lnglats = this.lnglats;
      for (let i = 0; i < lnglats.length; i++) {
        var Icon;
        var Label;
        if (lnglats[i].flag == 0) {
          if (lnglats[i].state == 1) {
            Icon = require("@/assets/imgs/MapAlarm.png");
          } else if (lnglats[i].state == 2) {
            Icon = require("@/assets/imgs/MapOffline.png");
          } else if (lnglats[i].state == 3) {
            Icon = require("@/assets/imgs/MapOnline.png");
          }
        } else if (lnglats[i].flag == 1) {
          Icon = require("@/assets/imgs/online-people.png");
          Label = lnglats[i].label;
        }

        var marker = new AMap.Marker({
          icon: Icon,
          position: lnglats[i].position,
          map: this.GDMap,
        });
        marker.id = lnglats[i].id
        console.log(Label);
        //if(typeof(Label)!=="undefined"){
        if (Label !== undefined) {
          marker.setLabel({
            offset: new AMap.Pixel(32, 10), //设置文本标注偏移量
            content:
              "<div class='info' style='color:#e98b05;'>" + Label + "</div>", //设置文本标注内容
            //direction: 'right' //设置文本标注方位
          });
        }
       
        if (lnglats[i].flag == 0) {
          marker.on("click", this.markerClick);
        }
      }
    },
    markerClick(e) {
      // console.log(e.target.id)
      var infoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        autoMove: true,
        content:this.$refs.infoWindowComponent.$el,
        offset: new AMap.Pixel(16, -45),
      });
      infoWindow.open(this.GDMap, e.target.getPosition());
      this.$refs.infoWindowComponent.initialize({
        id:e.target.id,
        overlay: "info",
        infoWindow: infoWindow
      });
    },
    createInfoWindow(title) {
      var info = document.createElement("div");
      info.className = "custom-info input-card content-window-card";

      //可以通过下面的方式修改自定义窗体的宽高
      // info.style.width = "400px";
      // 定义顶部标题
      var top = document.createElement("div");
      var titleD = document.createElement("div");
      var closeX = document.createElement("img");
      top.className = "info-top";
      titleD.innerHTML = title;
      closeX.src = "https://webapi.amap.com/images/close2.gif";
      closeX.onclick = this.closeInfoWindow;
      
      top.appendChild(titleD);
      top.appendChild(closeX);
      info.appendChild(top);
      return info;
    },
    closeInfoWindow() {
      // alert("close")
      this.GDMap.clearInfoWindow();
    },
  },

  mounted() {
    this.showMap();
  },
};
</script>

<style>
table tr td{border:1px solid #ccc;}
.custom-info {
  height: 200px;
  background: red;
}
/* .v-modal{z-index:5 !important;} */
.amap-sug-result {
  z-index: 2024;
}
</style>