简单信息窗体最后更新时间: 2021年01月22日

SimpleInfoWindow（简单信息窗体）继承自AMap.InfoWindow，提供一种简单的“标题+内容”构造的信息窗体（如上方示例）; 内容的构建支持使用模板.

如何使用

1、引入UI组件库

2、SimpleInfoWindow依赖jQuery或者Zepto，请参见这里确定是否需要进行DomLibrary设置。

3、加载SimpleInfoWindow（模块名：ui/overlay/SimpleInfoWindow）：

//设置DomLibrary，jQuery或者Zepto
AMapUI.setDomLibrary($);

//加载SimpleInfoWindow，loadUI的路径参数为模块名中 'ui/' 之后的部分
AMapUI.loadUI(['overlay/SimpleInfoWindow'], function(SimpleInfoWindow) {

    var infoWindow = new SimpleInfoWindow({
        infoTitle: '<strong>这里是标题</strong>',
        infoBody: '<p>这里是内容。</p>'
    });

    //显示在map上
    infoWindow.open(map, map.getCenter());
});

示例中心

接口文档

构造参数（父类）

参数名称	类型	说明
`infoTitle`	`String`	标题内容，html代码
`infoBody`	`String`	主体内容，html代码
`infoTplData`	`Object`	可选。模板数据，配合infoTitle/infoBody的模板使用, 比如： new SimpleInfoWindow({ infoTitle: '标题-<%- var1 %>', infoBody: '内容<%- var2 %>', //模板数据 infoTplData: { var1: '"标题-标题"', var2: '<内容>' } }); 模板语法同Underscore，包括以下3种： `<%-foo %>`，foo的原值html编码后输出 `<%= foo %>`，foo原值输出 `<% code %>`，js代码，比如`<% if(foo == 1) { %> <p>你好</p> <% } %>` 模板示例

参数名称

类型

说明

infoTitle

String

标题内容，html代码

infoBody

String

主体内容，html代码

infoTplData

Object

可选。模板数据，配合infoTitle/infoBody的模板使用, 比如：

new SimpleInfoWindow({
    infoTitle: '标题-<%- var1 %>',
    infoBody: '内容<%- var2 %>',
    //模板数据
    infoTplData: {
        var1: '"标题-标题"',
        var2: '<内容>'
    }
});

模板语法同Underscore，包括以下3种：

<%-foo %>，foo的原值html编码后输出
<%= foo %>，foo原值输出
<% code %>，js代码，比如<% if(foo == 1) { %> <p>你好</p> <% } %>

模板示例

禁用的InforWindowOptions

参数名称	禁用原因
`content`	SimpleInfoWindow内部利用了这些参数
`isCustom`	SimpleInfoWindow内部利用了这些参数

方法（父类）

方法名称	返回值	说明
`setInfoTitle(infoTitle:String)`		设置标题内容
`setInfoBody(infoBody:String)`		设置主体内容
`setInfoTplData(infoTplData:Object)`		设置模板数据
`get$InfoTitle()`	jQuery对象	返回InfoTitle对应的Dom节点的jQuery对象
`get$InfoBody()`	jQuery对象	返回InfoBody对应的Dom节点的jQuery对象
`get$Container()`	jQuery对象	返回整个窗体对应的Dom节点的jQuery对象

覆盖信息窗体的Dom结构

您可以通过如下的方法重新定义信息窗体的Dom结构（原理参见这里）：

JavaScript

//重新定义信息窗体的dom结构（在加载SimpleInfoWindow之前）
AMapUI.defineTpl(
 "ui/overlay/SimpleInfoWindow/tpl/container.html", //原始定义dom结构的模块的路径
 [], //模块依赖，留空
 function() {
        return '...html代码...';
    });

//加载SimpleInfoWindow
AMapUI.loadUI(['overlay/SimpleInfoWindow'], function(SimpleInfoWindow) {
   //此时将使用上方定义的dom结构

   //....
});

示例

简单信息窗体 最后更新时间: 2021年01月22日

如何使用

接口文档

覆盖信息窗体的Dom结构

简单信息窗体最后更新时间: 2021年01月22日