高德 开发 地图 JS API 开发指南 在地图上绘制 信息窗体

更新时间:2017年05月23日

亲手试一试

信息窗体包括InfoWindow和AdvancedInfoWindow两个类,InfoWindow可以实现默认信息窗体、自定义信息窗体,AdvancedInfoWindow是封装了周边搜索和三种路线规划的高级信息窗体。

默认信息窗体

默认信息窗体封装了关闭按钮,使用API默认的信息窗体样式,这个时候只需要对InfoWindow设定content属性即可,content可以是dom对象,也可以是html识别的字符串:

//构建信息窗体中显示的内容
function openInfo() {
   //构建信息窗体中显示的内容
   var info = [];
   info.push("<div><img data-src="\"" http:="" webapi.amap.com="" images="" autonavi.png="" \"=""> ");<br>
   info.push("<div style="\"padding:0px" 0px="" 4px;\"=""><b>高德软件有限公司</b>");<br>
   info.push("电话 : 010-84107000   邮编 : 100102");<br>
   info.push("地址 : 北京市望京阜通东大街方恒国际中心A座16层</div></div>");<br>

   infoWindow = new AMap.InfoWindow({
       content: info.join("<br>")  //使用默认信息窗体框样式,显示信息内容
   });
   infoWindow.open(map, [116.480983, 39.989628]);
}

自定义信息窗体

当把InfoWindow的isCustom属性设置为true的时候,信息窗体就会变成自定义信息窗体。与默认信息窗体的不同在于,自定义信息窗体需要自己通过content来实现关闭按钮以及全部外观样式,同时需要通过offset指定锚点位置,offset为相对于content下边缘中间点的位移:

//实例化信息窗体
var title='方恒假日酒店<span style="font-size:11px;color:#F00;">价格:318</span>',
    content=[];
content.push("<img data-src="http://tpc.googlesyndication.com/simgad/5843493769827749134">地址:北京市朝阳区阜通东大街6号院3号楼 东北 8.3 公里");
content.push("电话:010 64733333");
content.push("<a href="http://ditu.amap.com/detail/B000A8URXB?citycode=110105" target="_blank">详细信息</a>");
var infoWindow = new AMap.InfoWindow({
    isCustom: true,  //使用自定义窗体
    content: createInfoWindow(title,content.join("<br>")),
    offset: new AMap.Pixel(16, -50)//-113, -140
});
infoWindow.open(map, [116.480983, 39.989628]);

Marker与信息窗体的交互

Marker与信息窗体联合使用是一种非常常见的使用场景,我们来为一组marker点添加点击事件,点击时展开对应的信息窗体:

创建一组Marker和一个信息窗体

var lnglats=[//也可以使用LngLat对象
 [116.368904,39.923423],[116.382122,39.921176],
 [116.387271,39.922501],[116.398258,39.914600]
];
var infoWindow = new AMap.InfoWindow();
for(var i = 0, marker; i < lnglats.length; i++){
    marker=new AMap.Marker({
        position:lnglats[i],
        map:map
    });
    marker.content='我是第'+i+'个信息窗体的内容';
    //给Marker绑定单击事件
    marker.on('click', markerClick);
}
map.setFitView();

处理Marker的单击事件

function markerClick(e){
    infoWindow.setContent(e.target.content);
    infoWindow.open(map, e.target.getPosition());
}
  

高级信息窗体

高级信息窗体封装了输入提示、POI周边搜索、驾车路线规划、公交路线规划和步行路线规划,这些封装的功能是可以通过设定相关参数来决定是否显示和使用,使用高级信息窗体可以节省大量的开发工作,如果设置了panel属性,路线规划和poi搜索的结果可以显示在panel指定的div中:

var infowindow;
var infoWindowContent = '<div class="infowindow-content">' +
  '<div class="amap-info-header">方恒国际中心</div>' +
  '<div class="amap-info-body">阜通东大街6号</div></div>';

map.plugin('AMap.AdvancedInfoWindow', function () {

  infowindow = new AMap.AdvancedInfoWindow({
    panel: 'panel',
    placeSearch: true,
    asOrigin: true,
    asDestination: true,
    content: infoWindowContent
  });
  infowindow.open(map, [116.481488, 39.990464]);

});

运用UI组件库实现信息窗体

SimpleInfoWindow

SimpleInfoWindow 继承自 AMap.InfoWindow,提供极简的“标题+内容”形式构造的信息窗体。

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