高德地图信息窗体设置

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();
    };
  },

相关推荐

  1. 地图信息设置

    2024-01-06 03:40:03       47 阅读
  2. 地图+HTML+点击事件+自定心信息

    2024-01-06 03:40:03       11 阅读
  3. 地图海量点

    2024-01-06 03:40:03       40 阅读
  4. flutter 使用地图

    2024-01-06 03:40:03       40 阅读
  5. vue接入地图

    2024-01-06 03:40:03       43 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-01-06 03:40:03       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-06 03:40:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-06 03:40:03       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-06 03:40:03       20 阅读

热门阅读

  1. 【unity】屏幕事件

    2024-01-06 03:40:03       40 阅读
  2. 最大似然与交叉熵之间的关系以及互相推导过程

    2024-01-06 03:40:03       37 阅读
  3. 测试:常见的虚拟机命令

    2024-01-06 03:40:03       28 阅读
  4. OpenCV-Python(28):基于GrabCut 算法交互式前景提取

    2024-01-06 03:40:03       39 阅读
  5. 宝塔安装的imagemagick不能用,必须自己手动安装

    2024-01-06 03:40:03       43 阅读
  6. 企业怎么打造私域转化闭环?

    2024-01-06 03:40:03       40 阅读
  7. CodeBus投稿落选代码——瓦片地图粗糙版 记录

    2024-01-06 03:40:03       41 阅读
  8. 【学习记录】找最低位1/模块多次例化

    2024-01-06 03:40:03       40 阅读
  9. 《微信小程序开发从入门到实战》学习七十二

    2024-01-06 03:40:03       35 阅读