当前位置: 首页 > 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();
    };
  },

相关文章:

  • UE5 VR版增强输入初体验 官方模板学习
  • 『番外篇六』SwiftUI 取得任意视图全局位置的三种方法
  • 【2024系统架构设计】 系统架构设计师第二版-信息系统架构设计理论与实践
  • SVM 保存和加载模型参数
  • 【数据结构】八大排序之快速排序算法
  • Android设备sdcard/tf卡不识别在电脑上可以
  • 可变参数应用(C++并发编程中的joining_thread代码)
  • 解决Android AAPT: error: resource android:attr/lStar not found. 问题
  • CMake入门教程【基础篇】列表操作(list)
  • 超简单|配图详细| 双系统Ubuntu22.04 系统磁盘扩容
  • 旅游平台网页前后端
  • Selenium教程04:鼠标+键盘网页的模拟操作
  • 基于SpringBoot的物流管理系统
  • linux系统shell流文本处理工具——awk
  • 使用IDEA官方docker插件构建镜像
  • 速学python·注释
  • openssl 命令详解
  • MySQL的CRUD操作函数介绍union和union all
  • 2023年终总结
  • Elasticsearch:使用 ELSER v2 文本扩展进行语义搜索
  • 光速晋级!2025年多哈世乒赛孙颖莎4比0战胜对手
  • 因港而兴,“长江黄金水道”上的宜宾故事
  • 向猫学习禅修之后,你会发现将生活降格为劳作是多么愚蠢
  • 牛市早报|中方调整对美加征关税措施,五部门约谈外卖平台企业
  • 科普|揭秘女性压力性尿失禁的真相
  • 书法需从字外看,书法家、学者吴本清辞世