高德地图信息窗体设置

  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();
    };
  },
相关推荐
上趣工作室5 分钟前
vue2在el-dialog打开的时候使该el-dialog中的某个输入框获得焦点方法总结
前端·javascript·vue.js
家里有只小肥猫6 分钟前
el-tree 父节点隐藏
前端·javascript·vue.js
fkalis7 分钟前
【海外SRC漏洞挖掘】谷歌语法发现XSS+Waf Bypass
前端·xss
落落落sss21 分钟前
MQ集群
java·服务器·开发语言·后端·elasticsearch·adb·ruby
我救我自己21 分钟前
UE5运行时创建slate窗口
java·服务器·ue5
陈随易1 小时前
农村程序员-关于小孩教育的思考
前端·后端·程序员
云深时现月1 小时前
jenkins使用cli发行uni-app到h5
前端·uni-app·jenkins
昨天今天明天好多天1 小时前
【Node.js]
前端·node.js
朱容君1 小时前
Linux系统编程多线程之读写锁讲解
linux·开发语言
大风吹PP凉1 小时前
38配置管理工具(如Ansible、Puppet、Chef)
linux·运维·服务器·ansible·puppet