百度地图（6）-信息窗口

1. 在实际的开发过程中，我总共使用了三种类型的信息窗口，

BMap.InfoWindow，BMapLib.InfoBox，BMapLib.RichMarker

InfoWindow BMap 库默认的信息窗口，titlle 可以是html内容，但content是string。很奇怪。只支持同时显示一个信息窗口。

InfoBox　　BMapLib 扩展信息窗口，title 和 content 可以是 html，可以同时显示多个，content内的链接可以打开，但是不支持拖动。

RichMarker BMapLib 扩展信息窗口，title 和 content 可以是 html，可以同时显示多个，支持拖动，但是content 中如果有链接地址，将无法点击。

　　　　　个人理解，RichMarer 是作为一个整体添加的Overlay中的，其内部信息不可访问。只能作为一个整体来访问。

2. 添加InfoWindow

1 function addSimpleInfo(point,content){
2   var opts = {
3     250,
4     height:100,
5     title:"<div class='title' style='color: #4FA5FC'><strong>信息窗口</strong></div>"
6   };
7   var infoWindow = new BMap.InfoWindow(content,opts);
8   map.openInfoWindow(infoWindow,point);
9 }

3. 添加InfoBox

 1 var html = ["<div class='infoBoxContent'><div class='title'><strong>中海雅园</strong><span class='price'>均价43000</span></div>",
 2     "<div class='list'><ul><li><div class='left'><img src='/bdMap/img/house3.jpg'/></div><div class='left'><a target='_blank' href='http://map.baidu.com'>中海雅园南北通透四居室</a><p>4室2厅，205.00平米，3层</p></div><div class='rmb'>760万</div></li>"
 3     ,"<li><div class='left'><img src='/bdMap/img/house1.jpg'/></div><div class='left'><a target='_blank' href='http://map.baidu.com'>中海雅园四居室还带保姆间</a><p>2室1厅，112.00平米，16层</p></div><div class='rmb'>300万</div></li>"
 4     ,"<li><div class='left'><img src='/bdMap/img/house2.jpg'/></div><div class='left'><a target='_blank' href='http://map.baidu.com'>《有钥匙 随时看》花园水系</a><p>3室2厅，241.00平米，16层</p></div><div class='rmb'>400万</div></li>"
 5     ,"<li><div class='left'><img src='/bdMap/img/house3.jpg'/></div><div class='left'><a target='_blank' href='http://map.baidu.com'>富力城D区正规楼王大三居</a><p>3室3厅，241.00平米，17层</p></div><div class='rmb'>600万</div></li>"
 6     ,"<li class='last'><div class='left'><img src='/bdMap/img/house1.jpg'/></div><div class='left'><a target='_blank' href='http://map.baidu.com'>富力城豪，身份人士的象征</a><p>4室2厅，213.90平米，25层</p></div><div class='rmb'>700万</div></li>"
 7     ,"</ul></div>"
 8     ,"</div>"];
 9 
10   var infoBox = new BMapLib.InfoBox(map,html.join(""),{
11     boxStyle:{
12       background:"url('/bdMap/img/tipbox.gif') no-repeat center top"
13       , "270px"
14       ,height: "300px"
15     }
16     ,offset: new BMap.Size(10,20)
17     ,closeIconUrl:"/bdMap/img/close.png"
18     ,closeIconMargin: "1px 1px 0 0"
19     ,enableAutoPan: true
20     ,align: INFOBOX_AT_TOP
21   });
22 
23   marker.addEventListener("onclick", function(e) {
24     infoBox.open(marker);
25   });

4. 添加RichMarker

    var htmlContent = ["<div class='infoBoxContent'><div class='title'><strong>中海雅园</strong><span class='price'>均价43000，overlay-下面的链接无法打开，而infobox可以</span></div>",
      "<div class='list'><ul><li><div class='left'><img src='/bdMap/img/house3.jpg'/></div><div class='left'><a target='_blank' href='http://map.baidu.com'>中海雅园南北通透四居室</a><p>4室2厅，205.00平米，3层</p></div><div class='rmb'>760万</div></li>"
      ,"<li><div class='left'><img src='/bdMap/img/house1.jpg'/></div><div class='left'><a target='_blank' href='http://map.baidu.com'>中海雅园四居室还带保姆间</a><p>2室1厅，112.00平米，16层</p></div><div class='rmb'>300万</div></li>"
      ,"<li><div class='left'><img src='/bdMap/img/house2.jpg'/></div><div class='left'><a target='_blank' href='http://map.baidu.com'>《有钥匙 随时看》花园水系</a><p>3室2厅，241.00平米，16层</p></div><div class='rmb'>400万</div></li>"
      ,"<li><div class='left'><img src='/bdMap/img/house3.jpg'/></div><div class='left'><a target='_blank' href='http://map.baidu.com'>富力城D区正规楼王大三居</a><p>3室3厅，241.00平米，17层</p></div><div class='rmb'>600万</div></li>"
      ,"<li class='last'><div class='left'><img src='/bdMap/img/house1.jpg'/></div><div class='left'><a target='_blank' href='http://map.baidu.com'>富力城豪，身份人士的象征</a><p>4室2厅，213.90平米，25层</p></div><div class='rmb'>700万</div></li>"
      ,"</ul></div>"
      ,"</div>"];

    var richContent = new BMapLib.RichMarker(htmlContent.join(""),point,{

      "anchor": new BMap.Size(-72,-86),
      "enableDragging":true
    });
    map.addOverlay(richContent);

5. 页面显示

6. 代码参考

https://github.com/WhatGIS/bdMap