百度地图（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

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

3. 添加InfoBox

var html = ["<div class='infoBoxContent'><div class='title'><strong>中海雅园</strong><span class='price'>均价43000</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 infoBox = new BMapLib.InfoBox(map,html.join(""),{
    boxStyle:{
      background:"url('/bdMap/img/tipbox.gif') no-repeat center top"
      , "270px"
      ,height: "300px"
    }
    ,offset: new BMap.Size(10,20)
    ,closeIconUrl:"/bdMap/img/close.png"
    ,closeIconMargin: "1px 1px 0 0"
    ,enableAutoPan: true
    ,align: INFOBOX_AT_TOP
  });

  marker.addEventListener("onclick", function(e) {
    infoBox.open(marker);
  });

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