当前位置: 首页 > news >正文

高德地图信息窗体设置

1. 添加默认信息窗体

//构建信息窗体中显示的内容var info = [];info.push(`<div style="height: 36px; line-height: 45px; padding: 0px 20px; white-space:nowrap;">位置:北京</div>`);info.push(`<div style="height: 36px; line-height: 20px; padding: 0px 20px; white-space:nowrap;">联系人:袁磊</div>`);this.infoWindow = new AMap.InfoWindow({content: info.join("") //使用默认信息窗体框样式,显示信息内容});// // getCenter() 获取地图中心点(数组)// this.infoWindow.open(this.aMap, this.aMap.getCenter());// 设置点坐标为窗体坐标;例:[123.40340954550922, 41.7334550336356]this.infoWindow.open(this.aMap, e.data.lnglat);

2. 使用自定义窗体(添加窗体)

//构建信息窗体中显示的内容var info = [];info.push(`<div style="height: 36px; line-height: 45px; padding: 0px 20px; white-space:nowrap;">位置:北京</div>`);info.push(`<div style="height: 36px; line-height: 20px; padding: 0px 20px; white-space:nowrap;">联系人:袁磊</div>`);that.infoWindow = new AMap.InfoWindow({isCustom: true, //使用自定义窗体content: `<div style="background: #f00;">jdfghjdfihg</div><div class="close-btn" style="float: right;margin-top: 3px; margin-right: 5px;" onclick="closeInfoWindow()">X</div>`,offset: new AMap.Pixel(16, -45)});// // getCenter() 获取地图中心点(数组)// this.infoWindow.open(this.aMap, this.aMap.getCenter());// 设置点坐标为窗体坐标;例:[123.40340954550922, 41.7334550336356]that.infoWindow.open(that.aMap, e.data.lnglat);

3关闭自定义窗体(closeInfoWindow方法也要挂在window)

mounted() {window.closeInfoWindow = () => {this.aMap.clearInfoWindow();};},

http://www.lryc.cn/news/273831.html

相关文章:

  • isEmpty 和 isBlank 的用法区别,居然一半的人答不上来.....
  • 数据分析求职-简历准备
  • 亚马逊店铺遇到账号申诉模版分享
  • 2023年广东省网络安全A模块(笔记详解)
  • 竞赛保研 基于机器视觉的银行卡识别系统 - opencv python
  • 书摘:C 嵌入式系统设计模式 04
  • C 练习实例16 - 最大公约数和最小公倍数
  • GAN-概念和应用场景
  • LeetCode(36)有效的数独 ⭐⭐
  • 用LCD显示字符‘A‘
  • Zookeeper相关问题及答案(2024)
  • 1.大数据概述
  • NGUI基础-Widget
  • SpringBoot集成沙箱支付
  • BUUCTF--gyctf_2020_borrowstack1
  • 图像分割-Grabcut法(C#)
  • C# WPF上位机开发(Web API联调)
  • c语言:用结构体求平均分|练习题
  • echarts 仪表盘进度条 相关配置
  • Simpy:Python之离散时间序列仿真
  • 连接GaussDB(DWS)报错:Invalid or unsupported by client SCRAM mechanisms
  • 汽车标定技术(十四)--标定数据固化方法简介
  • 2024年关键技术发展战略趋势前瞻
  • Java程序设计——GUI设计
  • three.js Raycaster(鼠标点击选中模型)
  • Springboot整合RocketMQ 基本消息处理
  • 红外传感器深入解析
  • 18、Kubernetes核心技术 - InitContainer(初始化容器)
  • electron进程通信之预加载脚本和渲染进程对主进程通信
  • 如何有效使用 .gitignore 文件