高德地图信息窗体设置

  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 分钟前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
曹牧8 分钟前
HTML字符实体和转义字符串
前端·html
小希爸爸14 分钟前
2、中医基础入门和养生
前端·后端
局外人LZ17 分钟前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js
G_GreenHand32 分钟前
Dhtmlx Gantt教程
前端
鹿九巫33 分钟前
【CSS】层叠,优先级与继承(四):层叠,优先级与继承的关系
前端·css
卓怡学长35 分钟前
w304基于HTML5的民谣网站的设计与实现
java·前端·数据库·spring boot·spring·html5
宝拉不想努力了37 分钟前
vue element使用el-table时,切换tab,table表格列项发生错位问题
前端·vue.js·elementui
YONG823_API42 分钟前
深度探究获取淘宝商品数据的途径|API接口|批量自动化采集商品数据
java·前端·自动化
鱼樱前端42 分钟前
前端必知必会:JavaScript 对象与数组克隆的 7 种姿势,从浅入深一网打尽!
前端·javascript