提高B格:租房中应用PHP和百度地图把多房源标记于地图上

时间:15-03-07 栏目:PHP开发, 生活锁事 作者:kyle 评论:2 点击: 4,984 次

马上房子要到期了,到北京厮混也快满2年了。准备新搬一个住的地方。每次搬家痛苦,找房子更痛苦。北京的房子死贵死贵的。

 

要找个离公司近一点,做地铁也方便的地方不容易。朋友一直推荐自如的房子说是不错。价格略高,但是服务还行。于是去自如官网找了一找,http://www.ziroom.com,妈蛋,上面的地址只知道大概地方根本搞不明白如何来对比直观判断价格,大小和离地铁远近。于是有个思路把上面的房源标记于一张地图上,直观的看到价格大小和详细地址。于了有了此文。

 

一、百度多点标记

百度了一段代码,利用百度的API,把多个点标记到界面上。详细代码如下:

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>百度地图API显示多个标注点带百度样式信息检索窗口的代码</title>
<link href="style/demo.css"rel="stylesheet"type="text/css"/>
<script src="scripts/jquery-1.9.1.js"type="text/javascript"></script>
<script src="scripts/demo.js"type="text/javascript"></script>
<script type="text/javascript"src="http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR"></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"/> 
</head>
<body>
<div class="demo_main">
<fieldset class="demo_title">
百度地图API显示多个标注点带提示的代码
</fieldset>
<fieldset class="demo_content">
<div style="min-height: 500px; width: 100%;"id="map">
</div>
<script type="text/javascript">
    var markerArr = [{ title:"4号楼4单元202 距6号线海淀五路居步行19分钟1490元/月", point:"116.266289,39.935942", address:"4号楼4单元202 距6号线海淀五路居步行19分钟", url:"http://www.ziroom.com/z/vr/128186.html"},{ title:"海淀区永泰东里1单元301 距8号线永泰庄步行4分钟 | 1490元/月", point:"116.367137,40.040209", address:"海淀区永泰东里1单元301 距8号线永泰庄步行4分钟 | ", url:"http://www.ziroom.com/z/vr/195271.html"},{ title:"海淀区太平路36号院2单元9 距1号线五棵松步行10分钟 | 990元/月", point:"116.278138,39.90634", address:"海淀区太平路36号院2单元9 距1号线五棵松步行10分钟 | ", url:"http://www.ziroom.com/z/vr/44739.html"},{ title:"海淀区森林大第1单元402 1430元/月", point:"116.390856,40.06733", address:"海淀区森林大第1单元402 ", url:"http://www.ziroom.com/z/vr/146299.html"},{ title:"海淀区龙兴园中区四单元401 距13号线龙泽步行19分钟 | 1360元/月", point:"116.328266,40.067963", address:"海淀区龙兴园中区四单元401 距13号线龙泽步行19分钟 | ", url:"http://www.ziroom.com/z/vr/90352.html"},{ title:"海淀区融泽嘉园11号楼1单元1301 距昌平线西二旗步行22分钟 | 1430元/月", point:"116.312103,40.074907", address:"海淀区融泽嘉园11号楼1单元1301 距昌平线西二旗步行22分钟 | ", url:"http://www.ziroom.com/z/vr/179976.html"},{ title:"海淀区龙兴园中区四单元401 距13号线龙泽步行19分钟 | 1430元/月", point:"116.328266,40.067963", address:"海淀区龙兴园中区四单元401 距13号线龙泽步行19分钟 | ", url:"http://www.ziroom.com/z/vr/90350.html"},{ title:"海淀区融泽嘉园6号院6号楼2单元1607 距昌平线西二旗步行22分钟 | 1460元/月", point:"116.312103,40.074907", address:"海淀区融泽嘉园6号院6号楼2单元1607 距昌平线西二旗步行22分钟 | ", url:"http://www.ziroom.com/z/vr/195686.html"},{ title:"海淀区融泽嘉园1单元707 距昌平线西二旗步行22分钟 | 1430元/月", point:"116.312103,40.074907", address:"海淀区融泽嘉园1单元707 距昌平线西二旗步行22分钟 | ", url:"http://www.ziroom.com/z/vr/195608.html"},{ title:"海淀区融泽嘉园4单元2401 距昌平线西二旗步行22分钟 | 1390元/月", point:"116.312103,40.074907", address:"海淀区融泽嘉园4单元2401 距昌平线西二旗步行22分钟 | ", url:"http://www.ziroom.com/z/vr/195614.html"},{ title:"海淀区融泽嘉园4单元2401 距昌平线西二旗步行22分钟 | 1330元/月", point:"116.312103,40.074907", address:"海淀区融泽嘉园4单元2401 距昌平线西二旗步行22分钟 | ", url:"http://www.ziroom.com/z/vr/195615.html"},{ title:"海淀区保利西山林语3单元302 1330元/月", point:"116.245166,40.049774", address:"海淀区保利西山林语3单元302 ", url:"http://www.ziroom.com/z/vr/100916.html"},{ title:"海淀区融泽嘉园6号院6号楼2单元1607 距昌平线西二旗步行22分钟 | 1230元/月", point:"116.312103,40.074907", address:"海淀区融泽嘉园6号院6号楼2单元1607 距昌平线西二旗步行22分钟 | ", url:"http://www.ziroom.com/z/vr/195687.html"},{ title:"海淀区融泽嘉园1单元707 距昌平线西二旗步行22分钟 | 1230元/月", point:"116.312103,40.074907", address:"海淀区融泽嘉园1单元707 距昌平线西二旗步行22分钟 | ", url:"http://www.ziroom.com/z/vr/195609.html"},{ title:"海淀区安宁里南区0单元1807 距8号线西小口步行23分钟 | 1430元/月", point:"116.33837,40.050284", address:"海淀区安宁里南区0单元1807 距8号线西小口步行23分钟 | ", url:"http://www.ziroom.com/z/vr/197042.html"},{ title:"海淀区华鸿家园2单元101 1330元/月", point:"116.388338,40.068156", address:"海淀区华鸿家园2单元101 ", url:"http://www.ziroom.com/z/vr/115749.html"},{ title:"海淀区富力桃园A区A9101 1290元/月", point:"116.384155,40.070139", address:"海淀区富力桃园A区A9101 ", url:"http://www.ziroom.com/z/vr/30764.html"},{ title:"海淀区保利西山林语31号楼1单元602 1190元/月", point:"116.245166,40.049774", address:"海淀区保利西山林语31号楼1单元602 ", url:"http://www.ziroom.com/z/vr/195832.html"},{ title:"海淀区保利西山林语31号楼1单元602 1430元/月", point:"116.245166,40.049774", address:"海淀区保利西山林语31号楼1单元602 ", url:"http://www.ziroom.com/z/vr/195831.html"},{ title:"海淀区保利西山林语19号楼1单元501 1330元/月", point:"116.245166,40.049774", address:"海淀区保利西山林语19号楼1单元501 ", url:"http://www.ziroom.com/z/vr/177705.html"},{ title:"海淀区保利西山林语31号楼1单元602 1430元/月", point:"116.245166,40.049774", address:"海淀区保利西山林语31号楼1单元602 ", url:"http://www.ziroom.com/z/vr/195830.html"},{ title:"百旺茉莉园21号楼1单元201 1490元/月", point:"116.261434,40.056052", address:"百旺茉莉园21号楼1单元201 ", url:"http://www.ziroom.com/z/vr/35821.html"},{ title:"保利西山林语29号楼2单元601 1390元/月", point:"116.245166,40.049774", address:"保利西山林语29号楼2单元601 ", url:"http://www.ziroom.com/z/vr/197029.html"}
    ];

    function map_init() {
        var map = new BMap.Map("map"); // 创建Map实例
        var point = new BMap.Point(116.266289,39.935942); //地图中心点,北京
        map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别。
        map.enableScrollWheelZoom(true); //启用滚轮放大缩小

        //地图、卫星、混合模式切换
        map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]}));

        //向地图中添加缩放控件
        var ctrlNav = new window.BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            type: BMAP_NAVIGATION_CONTROL_LARGE
        });
        map.addControl(ctrlNav);

        //向地图中添加缩略图控件
        var ctrlOve = new window.BMap.OverviewMapControl({
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
            isOpen: 1
        });
        map.addControl(ctrlOve);

        //向地图中添加比例尺控件
        var ctrlSca = new window.BMap.ScaleControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT
        });
        map.addControl(ctrlSca);

        var point = new Array(); //存放标注点经纬信息的数组
        var marker = new Array(); //存放标注点对象的数组
        var info = new Array(); //存放提示信息窗口对象的数组
        var searchInfoWindow =new Array();//存放检索信息窗口对象的数组

        //遍历坐标生成地图
        for (var i = 0; i < markerArr.length; i++) {
            var p0 = markerArr[i].point.split(",")[0]; //
            var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
            point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点
            marker[i] = new window.BMap.Marker(point[i]); //按照地图点坐标生成标记
            map.addOverlay(marker[i]);
            marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

            //显示marker的title,marker多的话可以注释掉
            var label = new window.BMap.Label(markerArr[i].title, { offset: new window.BMap.Size(20, -10) });
            marker[i].setLabel(label);

            // 创建信息窗口对象
            info[i] ="<p style=’font-size:12px;lineheight:1.8em;’>"+"</br>地址:"+ markerArr[i].address +"</br> 网址:<a target=\"_blank\" href=\""+ markerArr[i].url +"\">"+ markerArr[i].url +"</a></br></p>";

            //创建百度样式检索信息窗口对象
            searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, info[i], {
                title : markerArr[i].title, //标题
                width : 290, //宽度
                height : 105, //高度
                panel :"panel", //检索结果面板
                enableAutoPan : true, //自动平移
                searchTypes :[
                BMAPLIB_TAB_SEARCH, //周边检索
                BMAPLIB_TAB_TO_HERE, //到这里去
                BMAPLIB_TAB_FROM_HERE //从这里出发
                ]
            });
            //添加点击事件
            marker[i].addEventListener("click",
                (function(k){
                    // js 闭包
                    return function(){
                        //将被点击marker置为中心
                        //map.centerAndZoom(point[k], 18);
                        //在marker上打开检索信息窗口
                        searchInfoWindow[k].open(marker[k]);
                    }
                })(i)
                );
        }
    }

    //异步调用百度js
    function map_load() {
        var load = document.createElement("script");
        load.src ="http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR&callback=map_init";
        document.body.appendChild(load);
    }
    window.onload = map_load;
</script>
</fieldset>
</div>
</body>
</html>

 

二、用PHP把自如的房源信息搞回来

使用了PHP的小型Snoopy抓取框架

    /**
     * 抓取自如房源转换为百度地图可识别的坐标形式和描述
     */
    public function Scrape()
    {
        include "Snoopy.class.php";
        $snoopy = new Snoopy;

        //要采集的URL列表页
        $urls=array('http://www.ziroom.com/z/nl/d23008618-z3-r2.html','http://www.ziroom.com/z/nl/d23008618-z3-r2.html?p=2');

        $matches=array();
        foreach ($urls as $url) {
            $snoopy->fetch($url);
            $html=$snoopy->results;

            $items=array();
            preg_match_all('/searchlist_([\s\S]*?)comments/im', $html, $items,PREG_SET_ORDER );

            //echo '匹配出来结果【'.count($items).'】条<br/>';

            foreach ($items as $item) {
                preg_match('/data-lng="(.*?)"/i', $item[0], $matches);
                $data_lng=strip_tags($matches[1]);

                preg_match('/data-lat="(.*?)"/i', $item[0], $matches);
                $data_lat=strip_tags($matches[1]);

                preg_match('/data-addr="(.*?)"/i', $item[0], $matches);
                $title=strip_tags($matches[1]);
                $title=str_replace('地址:', '', $title);

                preg_match('/priceDetail">([\\s\S]*?)<\/div>/im', $item[0],$matches);
                $price=trim(strip_tags($matches[1]));

                preg_match('/href="(.*?)"/im', $item[0],$matches);
                $url=strip_tags($matches[1]);

                // echo '<pre>';
                // echo $title.'====='.$url.'====='.$data_lng.'===='.$data_lat.'===='.$price.'<br/>';
                // echo '</pre>';

                //输出百度地图需要的标点格式
                printf('{ title:"%s", point:"%s,%s", address:"%s", url:"%s"},',$title.''.$price,$data_lng,$data_lat,$title,$url);
            }
        }
        
    }

 

最后达到的效果是这样的:

1

再来个小图仔细一点

2

房源里面房子的大小平米和楼层还没有标记,标记之后会更方便看。

这直接看到几个不错的地方,放大缩小,附近信息也可以查看。

 

抽个时间打个电话去看看啦。房子搞好,搬家就容易了。求搬运工了。

成都SEO小五嚎2句: 本文是(成都SEO小五)辛苦弄出来的,转载成都SEO小五原创的请保留链接: 提高B格:租房中应用PHP和百度地图把多房源标记于地图上,3Q

提高B格:租房中应用PHP和百度地图把多房源标记于地图上:目前有2 条留言,牛逼吧!

  1. 板凳
    行书:

    这个很好,
    如果能实现QQ里说的那个的话,就更好了。

    行书

    2015-03-10 10:46 pm [回复]
  2. 沙发
    啊啊:

    瞬间逼格提升,高大上!

    2015-05-15 11:59 am [回复]

来给哥评论评论


------====== 小五公告 ======------
成都SEO小五,专注成都搜索引擎优化。
小五善长站内外优化,C#、PHP开发,中英文SEO,Google中英文和百度优化技术。欢迎群内交流。伸手党请绕路,求资源的请绕开,求问题解答的请进群内交流。开放了一个QQ交流群:160750032。加入验证时请标注任何SEO相交字眼。友情链接直接Q我,收录正常,内容大部份原创、SEO或者程序开发、网络营销、线上推广等相关行业即可。

常用工具

赞助广告

来看过哥的人