高德地图提供的默认信息窗体拼接很不理想
如红色块标记的,后期修改和维护都不方便。
我的前端工程是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
});
}
},
效果图: