aaronyang的百度地图API之LBS云[把数据丰富显示1/3]

2022-05-19 02:55:10

中国的IT 需要无私分享和贡献的人，一起努力

 

本篇博客来自地址:http://www.cnblogs.com/AaronYang/p/3673933.html，请支持原创，未经允许不许转载

一、第一步

  默认我们显示我们leverTerminal表中所有信息，使用云麻点图模式显示

 1.1我们添加一个新的页面MaDian

aaronyang的百度地图API之LBS云[把数据丰富显示1/3]
<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>
aaronyang的百度地图API之LBS云[把数据丰富显示1/3]

代码的js部分，这里有个geotableId的设置，我的LBS上leverterminal的表的ID是59897

aaronyang的百度地图API之LBS云[把数据丰富显示1/3]

OK，默认我们显示所有的这张表上的手机用户信息，F5运行，效果如下

aaronyang的百度地图API之LBS云[把数据丰富显示1/3]

1.2使用 百度API的 信息窗口知识点

  1.2.1 普通窗口

      基本上两个窗口，一个基本窗口，还有个点击短信弹窗的窗口

      效果图：

      aaronyang的百度地图API之LBS云[把数据丰富显示1/3]

代码：

aaronyang的百度地图API之LBS云[把数据丰富显示1/3]
  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()


    }
aaronyang的百度地图API之LBS云[把数据丰富显示1/3]

 

   2.2中等窗口

   其实

var infoWindow = new BMap.InfoWindow("我的" + contentPoi.PhoneType + "花了我" + contentPoi.PhonePrice + "元<br/>" + "地址：" + customPoi.address, opts)
的第一个参数内容，是html，所以你可以自定义内容在里面
我们修改代码如下
aaronyang的百度地图API之LBS云[把数据丰富显示1/3]
    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();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
        }
    }
aaronyang的百度地图API之LBS云[把数据丰富显示1/3]

aaronyang的百度地图API之LBS云[把数据丰富显示1/3]

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上打开：

aaronyang的百度地图API之LBS云[把数据丰富显示1/3]
 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上打开检索信息串口
       
    }
aaronyang的百度地图API之LBS云[把数据丰富显示1/3]

效果图：

aaronyang的百度地图API之LBS云[把数据丰富显示1/3]

使用infoWindow，可以自带一些公交等功能，简化了很多步骤，是不是感觉挺好的。

这些的数据都是来自 LBS云，我们上一课说的存进去的数据，你可以添加更多的数据，这样这里就密密麻麻了，很壮观哦

 最后，我们添加一个搜索结果面板，显示地图搜索后的结果：

页面整体代码如下
aaronyang的百度地图API之LBS云[把数据丰富显示1/3]
<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 />&lt;</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>
整体页面代码

效果图：

aaronyang的百度地图API之LBS云[把数据丰富显示1/3]





中国的IT 需要无私分享和贡献的人，一起努力 AaronYang 2014年


 


 


aaronyang的百度地图API之LBS云[把数据丰富显示1/3],布布扣,bubuko.com


aaronyang的百度地图API之LBS云[把数据丰富显示1/3]
上一篇：ASP.NET Web API 2 返回 Json格式

下一篇：U盘装WIN7_安装程序无法定位现有分区，也无法创建新的系统分区