中国的IT 需要无私分享和贡献的人,一起努力
本篇博客来自地址:http://www.cnblogs.com/AaronYang/p/3673933.html,请支持原创,未经允许不许转载
一、第一步
默认我们显示我们leverTerminal表中所有信息,使用云麻点图模式显示
1.1我们添加一个新的页面MaDian
<h1>第三课 POI数据检索-麻点地图</h1> @section BaiduApi{ <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script> } <br /> <div> 搜索条件 </div> <br/> <div id="container" style="width:100%;height:500px;"></div> <script type="text/javascript"> var map = new BMap.Map("container"); // 创建地图实例 map.centerAndZoom(new BMap.Point(117.234963, 31.858815), 15);// 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(); map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件 var customLayer; function addCustomLayer(keyword) { if (customLayer) { map.removeTileLayer(customLayer); } customLayer = new BMap.CustomLayer({ geotableId: 59897, q: keyword, //检索关键字 tags: ‘‘, //空格分隔的多字符串 filter: ‘‘ //过滤条件,参考http://developer.baidu.com/map/lbs-geosearch.htm#.search.nearby }); map.addTileLayer(customLayer); customLayer.addEventListener(‘hotspotclick‘, callback); } addCustomLayer(‘‘); function callback(e)//单击热点图层 { var customPoi = e.customPoi;//poi的默认字段 var contentPoi = e.content;//poi的自定义字段 } </script>
代码的js部分,这里有个geotableId的设置,我的LBS上leverterminal的表的ID是59897
OK,默认我们显示所有的这张表上的手机用户信息,F5运行,效果如下
1.2使用 百度API的 信息窗口知识点
1.2.1 普通窗口
基本上两个窗口,一个基本窗口,还有个点击短信弹窗的窗口
效果图:
代码:
function callback(e)//单击热点图层 { var customPoi = e.customPoi;//poi的默认字段 var contentPoi = e.content;//poi的自定义拓展的字段 var opts = { //发送的短信设置 width : 200, // 信息窗口宽度 height: 60, // 信息窗口高度 title : customPoi.title+"["+contentPoi.UserName+"]" , // 信息窗口标题 enableMessage:true,//设置允许信息窗发送短息 message: "我的" + contentPoi.PhoneType + "花了我" + contentPoi.PhonePrice + "元" } //customPoi JSON格式示例 //{poiId:160781908,databoxId:"",title:"大美手机连锁",address:"安徽省合肥市蜀山区长江西路286号" //,phoneNumber:"",postcode:"",provinceCode:-1,province:"安徽省",cityCode:-1,city:"合肥市",districtCode:-1,district:"蜀山区", //point:{lng:117.261589,lat:31.861123,gb:function (a){return a&&this.lat==a.lat&&this.lng==a.lng}, //equals:function (a){return a&&this.lat==a.lat&&this.lng==a.lng}},tags:undefined,typeId:-1,extendedData:{}} var windowPoint = new BMap.Point(customPoi.point.lng, customPoi.point.lat); var infoWindow = new BMap.InfoWindow("我的" + contentPoi.PhoneType + "花了我" + contentPoi.PhonePrice + "元<br/>" + "地址:" + customPoi.address, opts); // 创建信息窗口对象 map.openInfoWindow(infoWindow, windowPoint); //开启信息窗口 //获得窗口的内容的方法 infoWindow.getContent() }
2.2中等窗口
其实
var infoWindow = new BMap.InfoWindow("我的" + contentPoi.PhoneType + "花了我" + contentPoi.PhonePrice + "元<br/>" + "地址:" + customPoi.address, opts)
的第一个参数内容,是html,所以你可以自定义内容在里面
我们修改代码如下
function callback(e)//单击热点图层 { var customPoi = e.customPoi;//poi的默认字段 var contentPoi = e.content;//poi的自定义拓展的字段 var opts = { //发送的短信设置 width : 500, // 信息窗口宽度 //height: 60, // 信息窗口高度 title : customPoi.title+"["+contentPoi.UserName+"]" , // 信息窗口标题 enableMessage:true,//设置允许信息窗发送短息 message: "我的" + contentPoi.PhoneType + "花了我" + contentPoi.PhonePrice + "元" } //customPoi JSON格式示例 //{poiId:160781908,databoxId:"",title:"大美手机连锁",address:"安徽省合肥市蜀山区长江西路286号" //,phoneNumber:"",postcode:"",provinceCode:-1,province:"安徽省",cityCode:-1,city:"合肥市",districtCode:-1,district:"蜀山区", //point:{lng:117.261589,lat:31.861123,gb:function (a){return a&&this.lat==a.lat&&this.lng==a.lng}, //equals:function (a){return a&&this.lat==a.lat&&this.lng==a.lng}},tags:undefined,typeId:-1,extendedData:{}} var simplyText="我的" + contentPoi.PhoneType + "花了我" + contentPoi.PhonePrice + "元<br/>" + "地址:" + customPoi.address; var cusContent = "<h4 style=‘margin:0 0 5px 0;padding:0.2em 0‘>"+ contentPoi.PhoneType + ":" + contentPoi.PhonePrice + "元</h4>" + "<img style=‘float:right;margin:4px‘ id=‘lzImg‘ src=‘http://pic.cnitblog.com/avatar/377862/20130804124758.png‘ width=‘128‘ height=‘128‘ title=‘aaron yang‘/>" + "<p style=‘margin:0;line-height:1.5;font-size:13px;text-indent:2em‘>"+simplyText+"</p>" + "</div>"; var windowPoint = new BMap.Point(customPoi.point.lng, customPoi.point.lat); var infoWindow = new BMap.InfoWindow(cusContent, opts); // 创建信息窗口对象 map.openInfoWindow(infoWindow, windowPoint); //开启信息窗口 //获得窗口的内容的方法 infoWindow.getContent() document.getElementById(‘lzImg‘).onload = function () { infoWindow.redraw(); //防止在网速较慢,图片未加载时,生成的信息框高度比图片的总高度小,导致图片部分被隐藏 } }
2.3 使用百度提供的 infoWindow窗口显示
首先引用两个资源
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script> <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
下面的js我们改下,我们要让我们的窗口在maker上打开:
function callback(e)//单击热点图层 { var customPoi = e.customPoi;//poi的默认字段 var contentPoi = e.content;//poi的自定义拓展的字段 /*简单文本DEMO*/ //var opts = { //发送的短信设置 // width : 500, // 信息窗口宽度 // //height: 60, // 信息窗口高度 // title : customPoi.title+"["+contentPoi.UserName+"]" , // 信息窗口标题 // enableMessage:true,//设置允许信息窗发送短息 // message: "我的" + contentPoi.PhoneType + "花了我" + contentPoi.PhonePrice + "元" //} ////customPoi JSON格式示例 ////{poiId:160781908,databoxId:"",title:"大美手机连锁",address:"安徽省合肥市蜀山区长江西路286号" ////,phoneNumber:"",postcode:"",provinceCode:-1,province:"安徽省",cityCode:-1,city:"合肥市",districtCode:-1,district:"蜀山区", ////point:{lng:117.261589,lat:31.861123,gb:function (a){return a&&this.lat==a.lat&&this.lng==a.lng}, ////equals:function (a){return a&&this.lat==a.lat&&this.lng==a.lng}},tags:undefined,typeId:-1,extendedData:{}} // var simplyText="我的" + contentPoi.PhoneType + "花了我" + contentPoi.PhonePrice + "元<br/>" + "地址:" + customPoi.address; //var cusContent = "<h4 style=‘margin:0 0 5px 0;padding:0.2em 0‘>"+ contentPoi.PhoneType + ":" + contentPoi.PhonePrice + "元</h4>" + // "<img style=‘float:right;margin:4px‘ id=‘lzImg‘ src=‘http://pic.cnitblog.com/avatar/377862/20130804124758.png‘ width=‘128‘ height=‘128‘ title=‘aaron yang‘/>" + // "<p style=‘margin:0;line-height:1.5;font-size:13px;text-indent:2em‘>"+simplyText+"</p>" + // "</div>"; //var windowPoint = new BMap.Point(customPoi.point.lng, customPoi.point.lat); //var infoWindow = new BMap.InfoWindow(cusContent, opts); // 创建信息窗口对象 //map.openInfoWindow(infoWindow, windowPoint); //开启信息窗口 ////获得窗口的内容的方法 infoWindow.getContent() //document.getElementById(‘lzImg‘).onload = function () { // infoWindow.redraw(); //防止在网速较慢,图片未加载时,生成的信息框高度比图片的总高度小,导致图片部分被隐藏 //} //使用infoWindow var simplyText = "我的" + contentPoi.PhoneType + "花了我" + contentPoi.PhonePrice + "元<br/>" + "地址:" + customPoi.address; var cusContent = "<h4 style=‘margin:0 0 5px 0;padding:0.2em 0‘>"+ contentPoi.PhoneType + ":" + contentPoi.PhonePrice + "元</h4>" + "<img style=‘float:right;margin:4px‘ id=‘lzImg‘ src=‘http://pic.cnitblog.com/avatar/377862/20130804124758.png‘ width=‘128‘ height=‘128‘ title=‘aaron yang‘/>" + "<p style=‘margin:0;line-height:1.5;font-size:13px;text-indent:2em‘>"+simplyText+"</p>" + "</div>"; //创建检索信息窗口对象 var searchInfoWindow = new BMapLib.SearchInfoWindow(map, cusContent, { title: customPoi.title + "[" + contentPoi.UserName + "]", //标题 width : 300, //宽度 // height : 105, //高度 panel : "panel", //检索结果面板 enableAutoPan : true, //自动平移,开启后视野优化 searchTypes :[ BMAPLIB_TAB_SEARCH, //周边检索 BMAPLIB_TAB_TO_HERE, //到这里去 BMAPLIB_TAB_FROM_HERE //从这里出发 ] }); var windowPoint = new BMap.Point(customPoi.point.lng, customPoi.point.lat); var marker = new BMap.Marker(windowPoint); //创建marker对象 searchInfoWindow.open(marker); //在marker上打开检索信息串口 }
效果图:
使用infoWindow,可以自带一些公交等功能,简化了很多步骤,是不是感觉挺好的。
这些的数据都是来自 LBS云,我们上一课说的存进去的数据,你可以添加更多的数据,这样这里就密密麻麻了,很壮观哦
最后,我们添加一个搜索结果面板,显示地图搜索后的结果:
页面整体代码如下
<h1>第三课 POI数据检索-麻点地图</h1> @section BaiduApi{ <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script> <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" /> } <style> </style> <br /> <div> 关键字:<input value="" type="text" width="60" name="keyword" id="keyword" />Tag:<input value="" type="text" width="20" name="tags" id="tags" /><button id="search">立即搜索</button> </div> <br/> <div id="allmap" style="overflow:hidden;zoom:1;position:relative;"> <div id="container" style="width: 100%; height: 600px; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;"></div> <div id="showPanelBtn" style="position:absolute;font-size:14px;top:50%;margin-top:-95px;right:0px;width:20px;padding:10px 10px;color:#999;cursor:pointer;text-align:center;height:170px;background:rgba(255,255,255,0.9);-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;font-family:‘微软雅黑‘;font-weight:bold;">显示检索结果面板<br /><</div> <div id="panelWrap" style="width:0px;position:absolute;top:0px;right:0px;height:100%;overflow:auto;background:#fff;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"> <div style="width:20px;height:200px;margin:-100px 0 0 -10px;color:#999;position:absolute;opacity:0.5;top:50%;left:50%;">此处用于展示结果面板</div> <div id="panel" style="position:absolute;"></div> </div> </div> <script type="text/javascript"> var map = new BMap.Map("container"); // 创建地图实例 map.centerAndZoom(new BMap.Point(117.234963, 31.858815), 15);// 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(); map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件 var customLayer; function addCustomLayer(keyword) { if (customLayer) { map.removeTileLayer(customLayer); } customLayer = new BMap.CustomLayer({ geotableId: 59897, q: keyword, //检索关键字 tags: ‘‘, //空格分隔的多字符串 filter: ‘‘ //过滤条件,参考http://developer.baidu.com/map/lbs-geosearch.htm#.search.nearby }); map.addTileLayer(customLayer); customLayer.addEventListener(‘hotspotclick‘, callback); } addCustomLayer(‘‘); function callback(e)//单击热点图层 { var customPoi = e.customPoi;//poi的默认字段 var contentPoi = e.content;//poi的自定义拓展的字段 /*简单文本DEMO*/ //var opts = { //发送的短信设置 // width : 500, // 信息窗口宽度 // //height: 60, // 信息窗口高度 // title : customPoi.title+"["+contentPoi.UserName+"]" , // 信息窗口标题 // enableMessage:true,//设置允许信息窗发送短息 // message: "我的" + contentPoi.PhoneType + "花了我" + contentPoi.PhonePrice + "元" //} ////customPoi JSON格式示例 ////{poiId:160781908,databoxId:"",title:"大美手机连锁",address:"安徽省合肥市蜀山区长江西路286号" ////,phoneNumber:"",postcode:"",provinceCode:-1,province:"安徽省",cityCode:-1,city:"合肥市",districtCode:-1,district:"蜀山区", ////point:{lng:117.261589,lat:31.861123,gb:function (a){return a&&this.lat==a.lat&&this.lng==a.lng}, ////equals:function (a){return a&&this.lat==a.lat&&this.lng==a.lng}},tags:undefined,typeId:-1,extendedData:{}} // var simplyText="我的" + contentPoi.PhoneType + "花了我" + contentPoi.PhonePrice + "元<br/>" + "地址:" + customPoi.address; //var cusContent = "<h4 style=‘margin:0 0 5px 0;padding:0.2em 0‘>"+ contentPoi.PhoneType + ":" + contentPoi.PhonePrice + "元</h4>" + // "<img style=‘float:right;margin:4px‘ id=‘lzImg‘ src=‘http://pic.cnitblog.com/avatar/377862/20130804124758.png‘ width=‘128‘ height=‘128‘ title=‘aaron yang‘/>" + // "<p style=‘margin:0;line-height:1.5;font-size:13px;text-indent:2em‘>"+simplyText+"</p>" + // "</div>"; //var windowPoint = new BMap.Point(customPoi.point.lng, customPoi.point.lat); //var infoWindow = new BMap.InfoWindow(cusContent, opts); // 创建信息窗口对象 //map.openInfoWindow(infoWindow, windowPoint); //开启信息窗口 ////获得窗口的内容的方法 infoWindow.getContent() //document.getElementById(‘lzImg‘).onload = function () { // infoWindow.redraw(); //防止在网速较慢,图片未加载时,生成的信息框高度比图片的总高度小,导致图片部分被隐藏 //} //使用infoWindow var simplyText = "我的" + contentPoi.PhoneType + "花了我" + contentPoi.PhonePrice + "元<br/>" + "地址:" + customPoi.address; var cusContent = "<h4 style=‘margin:0 0 5px 0;padding:0.2em 0‘>"+ contentPoi.PhoneType + ":" + contentPoi.PhonePrice + "元</h4>" + "<img style=‘float:right;margin:4px‘ id=‘lzImg‘ src=‘http://pic.cnitblog.com/avatar/377862/20130804124758.png‘ width=‘128‘ height=‘128‘ title=‘aaron yang‘/>" + "<p style=‘margin:0;line-height:1.5;font-size:13px;text-indent:2em‘>"+simplyText+"</p>" + "</div>"; //创建检索信息窗口对象 var searchInfoWindow = new BMapLib.SearchInfoWindow(map, cusContent, { title: customPoi.title + "[" + contentPoi.UserName + "]", //标题 width : 300, //宽度 // height : 105, //高度 panel : "panel", //检索结果面板 enableAutoPan : true, //自动平移,开启后视野优化 searchTypes :[ BMAPLIB_TAB_SEARCH, //周边检索 BMAPLIB_TAB_TO_HERE, //到这里去 BMAPLIB_TAB_FROM_HERE //从这里出发 ] }); var windowPoint = new BMap.Point(customPoi.point.lng, customPoi.point.lat); var marker = new BMap.Marker(windowPoint); //创建marker对象 searchInfoWindow.open(marker); //在marker上打开检索信息串口 } var isPanelShow = false; //显示结果面板动作 $("#showPanelBtn").click(function () { if (isPanelShow == false) { isPanelShow = true; $("#showPanelBtn").css({"right":"300px"}); $("#panelWrap").width(300); $("#map").css({ "margin-right": "300px" }); $("#showPanelBtn").html("隐藏检索结果面板<br/>>"); } else { isPanelShow = false; $("#showPanelBtn").css({ "right": "0px" }); $("#panelWrap").width(0); $("#map").css({ "margin-right": "0px" }); $("#showPanelBtn").html("显示检索结果面板<br/><"); } }); var O2String = function (O) { //return JSON.stringify(jsonobj); var S = []; var J = ""; if (Object.prototype.toString.apply(O) === ‘[object Array]‘) { for (var i = 0; i < O.length; i++) S.push(O2String(O[i])); J = ‘[‘ + S.join(‘,‘) + ‘]‘; } else if (Object.prototype.toString.apply(O) === ‘[object Date]‘) { J = "new Date(" + O.getTime() + ")"; } else if (Object.prototype.toString.apply(O) === ‘[object RegExp]‘ || Object.prototype.toString.apply(O) === ‘[object Function]‘) { J = O.toString(); } else if (Object.prototype.toString.apply(O) === ‘[object Object]‘) { for (var i in O) { O[i] = typeof (O[i]) == ‘string‘ ? ‘"‘ + O[i] + ‘"‘ : (typeof (O[i]) === ‘object‘ ? O2String(O[i]) : O[i]); S.push(i + ‘:‘ + O[i]); } J = ‘{‘ + S.join(‘,‘) + ‘}‘; } return J; }; </script>
效果图:
中国的IT 需要无私分享和贡献的人,一起努力 AaronYang 2014年