高德地图信息窗体设置

  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();
    };
  },
相关推荐
还是鼠鼠2 小时前
图书管理系统 Axios 源码 __删除图书功能
前端·javascript·vscode·ajax·前端框架·node.js·bootstrap
轻口味2 小时前
Vue.js `Suspense` 和异步组件加载
前端·javascript·vue.js
深度Linux3 小时前
Linux网络编程中的零拷贝:提升性能的秘密武器
linux·linux内核·零拷贝技术
m0_zj4 小时前
8.[前端开发-CSS]Day08-图形-字体-字体图标-元素定位
前端·css
还是鼠鼠4 小时前
图书管理系统 Axios 源码__编辑图书
前端·javascript·vscode·ajax·前端框架
m0_465215794 小时前
TCP & UDP Service Model
服务器·网络·tcp/ip
北极象4 小时前
vue3中el-input无法获得焦点的问题
前端·javascript·vue.js
百度网站快速收录4 小时前
网站快速收录:如何优化网站头部与底部信息?
前端·html·百度快速收录·网站快速收录
Loong_DQX5 小时前
【react+redux】 react使用redux相关内容
前端·react.js·前端框架
GISer_Jing5 小时前
react redux监测值的变化
前端·javascript·react.js