示例中心
功能在线体验
控制台

高德 开发 地图 JS API 参考手册 - UI组件库 信息窗体 简单信息窗体

更新时间:2018年07月02日

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> <% } %>


模板示例

禁用的InforWindowOptions

参数名称

禁用原因

content

SimpleInfoWindow内部利用了这些参数

isCustom

方法(父类

方法名称

返回值

说明

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结构(原理参见这里):

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

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

   //....
});

示例

移动端
示例中心
功能
在线体验
常见问题