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});}},

效果图：

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

在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
vue中进入页面，自动触发一次点击事件
vue中进入页面,自动触发一次点击事件 html script 一进去页面,我肯定是要进去就能看到数据,而不是需要点击选项1才得到数据,解决办法就是直接在created()中调用 html <d ...
vue组件-echarts地图显示柱状图并给柱状图添加点击事件（支持自定义地图）
vue组件-echarts地图显示柱状图并给柱状图添加点击事件(支持自定义地图) 效果如下所示: 参考文档: 这是参考的文档起因: 最近有朋友有需求需要用echarts,在地图上显示柱状图,并添加点 ...
html 地址点击召唤高德,高德地图api 点聚合+海量点+点击事件（根据地区或坐标进行定位）...
javascript 区划聚合+海量点展现 html, body, #container { width: 100%; height: 100%; margin: 0px; } #loadingTip ...
Vue给每个v-for的元素设置不同的点击事件
给每一个不同的点击事件思路:data中的v-for依赖的对象中在添加一个属性,属性值分别设置,然后在方法中去写各自的方法,当点击事件触发时,调用相对应的方法.但不适用于数据量太大,v-for生成的元 ...
vue+echarts实现3d地图——引入3d地图,加点,加点击事件
先看效果图: 1,获取相当于的json文件,推荐一个获取各个市县的json文件地址点击前往将下载好的josn文件重命名,简短点. 一共就三个文件第一个就是json文件, 第二个是myMap.js ...
高德地图api 点聚合+海量点+点击事件（根据地区或坐标进行定位）
<!doctype html> <html lang="zh-CN"> <head> <!-- 原始地址://webapi ...
vue使用高德地图为信息窗体再添加点击事件
即使是用的vue,也不能使用@click为窗体添加点击事件,需要使用onclick,并且在定义了函数后,使用该函数还是会报函数未定义的错误,需要在window下添加该函数,点击时可以在原型链中找到该函 ...
vue 使用高德地图给海量点标记，并点击标记弹出信息窗口，信息窗口绑定点击事件
目录一.需求二.引入高德地图 2.1.将高德地图引入到项目中 2.2.查看官网快速上手,熟悉高德地图的主要API 2.3.海量点标注要用到的API文档 2.4.全部代码其他: 一.需求因为不知 ...

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

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

最新文章

热门文章