高德地图信息窗体设置

2024-01-02 11:17:43

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

文章来源:https://blog.csdn.net/weixin_44042792/article/details/135334068
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。