百度地图(6)-信息窗口
百度 信息 窗口 地图
2023-09-11 14:21:35 时间
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
相关文章
- 百度地图API地点搜索-获取经纬度
- CentOS7服务器搭建百度贴吧云签到
- 获取百度搜索结果的真实URL、描述、标题
- thinkphp百度小程序打造的接口api
- destoon7.0-8.0解决pc端“您的页面可能存在图片不可全屏查看”百度移动落地页检测问题方法
- 第三百三十四节,web爬虫讲解2—Scrapy框架爬虫—Scrapy爬取百度新闻,爬取Ajax动态生成的信息
- Geocoding java调用百度地图API v2.0 图文 实例( 解决102错误)
- selenium实现登录百度(自动识别简单验证码)
- 优麒麟20版安装常用软件钉钉、百度云盘
- [python爬虫] 百度贴吧
- 谷歌、百度、1万ip能赚多少钱?1000IP能够值多少钱呢?
- 提高网站权重,快速增加百度收录量
- 基于百度AI平台的语音识别功能开发-SDK调用
- Python爬虫:利用百度短网址缩短url
- Python编程:通过百度地图接口抓取机构的地址和电话信息
- 2018"百度之星"程序设计大赛 - 资格赛
- go xpath 百度
- 【数据挖掘】百度机器学习-数据挖掘-自然语言处理工程师 历史笔试详解