百度地图（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 width: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 ,width: "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
