vue工程，高德地图信息窗体模块化插入，及信息窗口点击事件

高德地图提供的默认信息窗体拼接很不理想

如红色块标记的，后期修改和维护都不方便。

我的前端工程是vue+element

首先把信息窗口封装成独立的页面块，然后使用高德的自定义窗体引入

 

代码如下：

1.写一个vue信息窗体页面

<template>
  <div>
    <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>
import planMapEdit from "./plan-map-edit.vue";
export default {
  data() {
    return {
      overlay: null,
      infoWindow: null,
      isInfo: true,
    };
  },
  mounted() {},
  methods: {
    initialize(e) {
      this.overlay = e.overlay;
      this.infoWindow = e.infoWindow;
    },
    //关闭
    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>

2.通过高德提供的自定义信息窗体引入

    //覆盖物信息窗口
    infoWindowFun(e) {
      let _this = this;
      if (_this.isShowWindow) {
        _this.infoWindow = new AMap.InfoWindow({
          isCustom: true, //使用自定义窗体
          content: _this.$refs.planMapInfoWindow.$el,
          offset: new AMap.Pixel(0, -5),
        });
        //打开信息窗口
        _this.infoWindow.open(_this.map, e.lnglat);
        //初始化窗口数据
        _this.$refs.planMapInfoWindow.initialize({
          overlay: e.target,
          infoWindow: _this.infoWindow
        });
      }
    },

效果图：