百度地图找房源

最新推荐文章于 2023-05-09 16:46:43 发布
最新推荐文章于 2023-05-09 16:46:43 发布
阅读量772 收藏
点赞数
分类专栏： 地图 文章标签： 地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lvchengming268268/article/details/103014072
版权 
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style>
        *{
            padding: 0;
            margin: 0;
        }
        body,div{
            position: absolute;
            width: 100%;
            height: 100%;
        }
        /*隐藏地图控件*/
        .anchorBL, .BMap_cpyCtrl {
            display: none;
        }
        /*地图聚合样式*/
        .bubble p {
            text-align: center;
            color: #fff;
        }

        .bubble .name {
            margin-top: 25px;
            font-size: 14px;
        }
        /*信息窗口样式*/
        .infoArea{
            font-size: 12px;
            padding: 4px 0;
            background-color: #fff;
            border-radius: 2px;
            box-shadow: 0 10px 8px 0 rgba(0,0,0,.1);
        }
        .infoArea p{
            padding: 2px 10px;
        }
        .infoArea .name {
            height: 20px;
            line-height: 20px;
            font-weight: 800;
        }
        .red{
            color: red;
        }
        .infoBox .arrow {
            position: absolute;
            left: 10px;
            bottom: -8px;
            display: block;
            border: 8px solid transparent;
            border-left-color: #fff;
            width: 0;
            height: 0;
            margin: 0 auto;
            z-index: 1;
        }
        .infoBox .arrow .arrow-i {
            display: none;
            border: 6px solid transparent;
            border-top-color: #fff;
            width: 0;
            height: 0;
            position: absolute;
            top: -7px;
            left: -6px;
        }
    </style>

	<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=U6Ib7ApN6aSCcBlUgLp57URdUBDooDBB"></script>
	<script src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils.js"></script>
	<script src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js"></script>
	<script src="https://www.w3school.com.cn/jquery/jquery.js"></script>

	<title>添加行政区划</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	/*  实现地图搜房功能主要是几个步骤：
    1、添加聚合点marker（利用接口返回数据用marker来显示相应的数量来模拟聚合效果）；
    2、根据鼠标悬停事件来显示隐藏行政区划边界线（百度地图Polygon方法）；
    3、点击marker或鼠标滚轮事件来扩大地图级别显示所有的点（addEventListener(event: String, handler: Function)）；
    4、通过拖拽地图根据视野来加载对应的点，提高加载点位性能（百度地图GeoUtils）；
    5、给具体的点位添加信息窗体事件。
*/

    window.map = initMap();//初始化地图对象
    window.lastInfoBox = null; //定义最近打开的地图信息窗体
    window.pointArray = [];//行政区划点位集合
    window.labelData=[];//存数点位数据
    addMarker();//添加聚合点

    function initMap() {
        var map = new BMap.Map("allmap", {enableMapClick: false, minZoom: 9, maxZoom: 18});
        var point = new BMap.Point(113.658221, 34.780377);//郑州市中心点
        map.centerAndZoom(point, 9);
        map.enableScrollWheelZoom(true);
         //监听地图级别缩放事件，当级别为9时默认加载集合点，扩大级别时显示详细点位数据
        map.addEventListener("zoomend", function () {
            var zoomLevel=map.getZoom(); //获取地图缩放级别
            if(zoomLevel==9){
                addMarker();
            }else{
                //当存储的数据有数时直接加载视野数据，否则请求接口数据
                if(labelData.length>0){
                    addViewLabel(labelData);
                }else{
                    getAllLabel();
                }
            }
        });
        return map;
    }

    //根据行政区划绘制聚合点位
    function addMarker() {
        map.clearOverlays();
        //模拟数据
        var clustereData=[
            {"name":"郑州市","code":"410100000","longitude":"113.451854","latitude":"34.556306","count":"445"},
            {"name":"开封市","code":"410200000","longitude":"114.356733","latitude":"34.506238","count":"377"},
            {"name":"洛阳市","code":"410300000","longitude":"112.134468","latitude":"34.263041","count":"370"},
            {"name":"平顶山市","code":"410400000","longitude":"112.892161","latitude":"33.773999","count":"300"},
            {"name":"安阳市","code":"410500000","longitude":"114.098163","latitude":"36.106852","count":"290"},
            {"name":"鹤壁市","code":"410600000","longitude":"114.208643","latitude":"35.653125","count":"245"},
            {"name":"新乡市","code":"410700000","longitude":"113.933677","latitude":"35.31059","count":"236"},
            {"name":"焦作市","code":"410800000","longitude":"113.050848","latitude":"35.124706","count":"210"},
            {"name":"濮阳市","code":"410900000","longitude":"115.169299","latitude":"35.769421","count":"225"},
            {"name":"许昌市","code":"411000000","longitude":"113.856834","latitude":"34.043383","count":"155"}
        ];
        //为了提高百度地图性能，本篇例子点位全用label来加载点位
        $.each(clustereData,function (index,data) {
            var point = new BMap.Point(data.longitude, data.latitude);
            //自定义label样式
            var tpl = '<div class="bubble bubble-1" data-longitude="' + data.longitude + '"' +
                ' data-latitude="' + data.latitude + '" data-id="' + data.code + '">' +
                '<p class="name" title="' + data.name + '">' + data.name + '</p>' +
                '<p><span class="count">' + data.count + '</span>个楼盘</p>' +
                '</div>';
            var myLabel = new BMap.Label(tpl,
                {
                    position: point, //label 在此处添加点位位置信息
                    offset: new BMap.Size(-46, -46)
                });
            myLabel.setStyle({
                width: "92px",  //宽
                height: "92px", //高度
                border: "0",  //边
                background: "rgba(84,144,244,.9)",    //背景颜色
                borderRadius:"50%",
                cursor: "pointer"
            });
            myLabel.setTitle(data.name);
            map.addOverlay(myLabel);//添加点位
            // 当鼠标悬停在label上时显示行政区划边界
            myLabel.addEventListener("mouseover", function () {
                myLabel.setStyle({background:"rgba(241,80,68,.9)"}); //修改覆盖物背景颜色
                var regionName = myLabel.getTitle();
                getBoundary(regionName);
            });
            // 当鼠标离开时在删除边界折线数据
            myLabel.addEventListener("mouseout", function () {
                myLabel.setStyle({background:"rgba(84,144,244,.9)"}); //修改覆盖物背景颜色
                if (window.ply) {
                    var polyPathArray = new Array();
                    window.ply.setPath(polyPathArray);
                    map.removeOverlay(ply);//清除折线数据
                }
            });

            myLabel.addEventListener("click", function () {
                map.zoomIn();
                getAllLabel();//获取所有点位数据
            });

        })
    }

    //根据行政区划绘制边界
    function getBoundary(regionName) {
        var bdary = new BMap.Boundary();
        bdary.get(regionName, function (rs) {
            var count = rs.boundaries.length; //行政区域的点有多少个
            if (count === 0) {
                alert('未能获取当前输入行政区域');
                return;
            }
            for (var i = 0; i < count; i++) {
                if (!window.ply) {
                    window.ply = new BMap.Polygon(rs.boundaries[i], {
                        strokeWeight: 2,
                        strokeColor: "rgb(66, 133, 244)",
                        fillColor: "rgba(53, 126, 244,0.1)"
                    }); //建立多边形覆盖物
                    map.addOverlay(ply);  //添加覆盖物
                } else {
                    window.ply.setPath(rs.boundaries[i]);
                    map.addOverlay(ply);  //添加覆盖物
                }
                ply.enableMassClear();
                pointArray = pointArray.concat(ply.getPath());
            }
        });
    }

    //绘制详细楼盘点位信息
    function getAllLabel() {
        map.clearOverlays();
        //模拟点位数据
        var labelListData=[
            {"name":"楼盘一","code":"01","longitude":"113.515919","latitude":"34.799769","num":"10000"},
            {"name":"楼盘二","code":"02","longitude":"113.509444","latitude":"34.4475","num":"999"},
            {"name":"楼盘三","code":"03","longitude":"113.68175","latitude":"34.737633","num":"888"},
            {"name":"楼盘四","code":"04","longitude":"113.280769","latitude":"34.814961","num":"777"},
            {"name":"楼盘五","code":"05","longitude":"113.611175","latitude":"34.784972","num":"666"},
            {"name":"楼盘六","code":"06","longitude":"113.609436","latitude":"34.770558","num":"555"},
            {"name":"楼盘七","code":"07","longitude":"113.687778","latitude":"34.861111","num":"444"},
            {"name":"楼盘八","code":"08","longitude":"113.333333","latitude":"34.833333","num":"333"},
            {"name":"楼盘九","code":"09","longitude":"114.0537","latitude":"34.7273","num":"222"},
            {"name":"楼盘十","code":"10","longitude":"113.419642","latitude":"34.809192","num":"111"},
            {"name":"楼盘十一","code":"11","longitude":"113.068653","latitude":"34.382344","num":"1111"},
            {"name":"楼盘十二","code":"12","longitude":"113.1491","latitude":"34.389","num":"2222"}
            ];
        $.each(labelListData,function (index,data) {
            var point = new BMap.Point(data.longitude, data.latitude);
            var myLabel = new BMap.Label("",
                {
                    position: point, //label 在此处添加点位位置信息
                    offset: new BMap.Size(-12, -15)
                });
            myLabel.setStyle({
                width: "12px",  //宽
                height: "12px", //高度
                border: "0",  //边
                backgroundColor: "rgb(66, 133, 244)",
                borderRadius: "50%",
                cursor: "pointer"
            });
            myLabel.setTitle(data.name);
            labelData.push(myLabel);
//            map.addOverlay(myLabel);
            //信息窗口模板
           var tpl="<div class='infoBox' data-longitude='"+data.longitude+"' data-latitude='"+data.latitude+"' data-id='"+data.code+"'>" +
                "<div class='infoArea'><p class='name'>"+data.name+"</p><p class='num'>均价<span class='red'> "+data.num+" </span>万元/m3</p></div>" +
               "<i class='arrow'><i class='arrow-i'></i></i></div>";
            var infoBox = new BMapLib.InfoBox(map, tpl, {
                boxStyle: {
                    width: "160px",
                    minHeight: "50px",
                    marginBottom: "30px",
                    backgroundColor: "white"
                },
                closeIconMargin: "15px 10px 4px 4px",
                closeIconUrl: "img/icon-close.png",
                enableAutoPan: false,
                align: INFOBOX_AT_TOP
            });
            //鼠标点击时打开新标签并关闭上一个标签内容
            myLabel.addEventListener("mouseover", function () {
                if (window.lastInfoBox) {
                    //判断上一个窗体是否存在，若存在则执行close
                    window.lastInfoBox.close();
                }
                window.lastInfoBox = infoBox;
                infoBox.open(point);
            });
           //鼠标点击时标签一直存在
            myLabel.addEventListener("click", function () {
                window.lastInfoBox=null;
                infoBox.open(point);
            });
        });
        addViewLabel(labelData);//加载可视范围点
    }

    //根据地图视野动态加载数据，当数据多时此方法用来提高地图加载性能
    //由于此篇模拟点位数据较少，视野加载不明显，当数据多时可直观感觉
    function addViewLabel(labels) {
        map.clearOverlays();
        for(var i = 0; i < labels.length; i ++){
            var result = BMapLib.GeoUtils.isPointInRect(labels[i].point, map.getBounds());
            if(result == true) {
                map.addOverlay(labels[i])
            } else{
                map.removeOverlay(labels[i]);
            }
        }
    }

</script>
cheneylv268268
关注
专栏目录
百度地图——地图找房功能
weixin_69413377的博客
08-07 1271
代码地址：https://gitee.com/yuqi818/itcast-baidumap.git。* @param maxLongitude 最大经度。* @param minLongitude 最小经度。* @param maxLatitude 最大纬度。* @param minLatitude 最小纬度。* @param maxLongitude 最大经度。* @param minLongitude 最小经度。//价格保留2位小数。//价格保留2位小数。//价格保留2位小数。......
百度地图区域地图找房demo.rar
06-04
仿安居客的地图找房
百度地图点聚合仿地图找房demo优化版本JavaScript
02-20
修改源代码优化聚合点过于庞大，页面‘passive’警告高达数十万造成页面卡顿bug，增加扩展标注点文字，增加当前定位等一系列。可支持移动端h5.
jquery+baidu map api 仿安居客地图找房源（基于百度地图）
weixin_30663471的博客
11-08 736
开发技术：jquery,js baidu map api，json,ajax 转载于:https://www.cnblogs.com/ytjjyy/archive/2011/11/08/2240850.html
百度地图聚合找房开发
NYIST_YUN4的博客
04-10 1893
因项目需要用到点聚合的功能，因此研究了一下百度地图的聚合API。基于百度地图API和百度地图开源库聚合标记开发的一个地图找房的演示   当缩小地图的时候显示数量，点击可以放大单个显示区域的地址具体效果如图 点击后会放大，显示具体数据 如果需要显示聚合前的城市名称 maplib.js第448行有个叫做Cluster的类，有个属性叫做this._clusterMarker = new...
百度地图实现
05-22
"百度地图实现"是一个专为地图找房和定位功能设计的项目，它利用JavaScript（JS）这一强大的客户端脚本语言来创建交互式和动态的地图体验。对于新手开发者而言，这是一个理想的起点，因为它提供了易于理解和使用的...
类似链家的地图找房，js实现
12-05
本文将深入探讨如何使用JavaScript（js）和百度地图API来实现类似链家的地图找房功能。 首先，我们需要了解百度地图API。百度地图API是百度提供的一项服务，允许开发者在其平台上构建地图应用。它提供了丰富的地图...
iOS--地图找房(类似链家、安居客等地图找房)
iotjin的专栏
03-29 1825
转载自: https://www.jianshu.com/p/9cd290c8a6e8题外话：在百度搜索键入：iOS地图找房。你会发现搜索到很多关于这方面的帖子，但是几乎都是询问如何实现的，找不到一个可以研究借鉴的博客。于是我决定补上这个空缺，写的可能不全面，大家体谅。更新PS：原本我是没打算写Demo出来的，但博客发出来后很多人要，因为网络请求不能发出来，请理解。我把Demo中的网络请求全部干掉...
[JS版]基于百度地图的 Overlay 扩展，仿Q房网实现自定义覆盖物
10-06
经常看到各大找房系统平台上，有类似这样的功能： 地图上显示当前城市的区，鼠标悬停上去，显示这个区的不规则的范围覆盖物。点击这个地区热点，显示这个地区下的详细 热点。 最近做项目也需要用到类似效果，找不到合适的，自己动手撸了一个，有需要的朋友可以做下参考。
高仿58同城 链家 地图找房-高德地图显示数据点 - 按比例尺缩放显示数目
01-18
地图找房-高德地图显示数据点 - 按比例尺缩放显示数目---> (1.发起请求传给后台当前用户坐标。
2.让后台按用户位置将周边一定范围内（后台可调）的排序，返回。
3.前端请求到数据后，最近的电站数据在数组第一个，此时调用地图API的showAnnotations方法，显示用户位置和最近的房源大头针AnnotationView)--->XLsn0wKit--->(https://github.com/XLsn0w/XLsn0wKit_objc)
百度地图点聚合开发-地图找房功能
zgphacker2010的专栏
12-31 1922
百度地图开发常用网站 1、百度地图开放平台 http://lbsyun.baidu.com/ 2、百度地图Javascript API JavaScript API v3.0http://lbsyun.baidu.com/index.php?title=jspopular3.0 JavaScript API v2.0http://lbsyun.baidu.com/ind...
百度地图 覆盖物 Mark 的使用
abbiz的博客
02-23 331
Mark 点击后显示具体信息 private void showMarker(LatLng latLng,int i) { OverlayOptions option = new MarkerOptions().position(latLng).icon(BitmapDescriptorFactory.fromResource(R.drawable.icon_mark)).title(String.valueOf(i));//这里用title来传递id信息，也可以用追加.extraIn..
百度地图3.0自定义mark弹窗样式,多个标注点例子
最新发布
qq_55964564的博客
05-09 1389
tempalte样式。
教你用百度地图API抓取建筑物周边位置、房价信息（附代码）
数据派THU
12-27 9760
来源：大数据挖掘DT数据分析本文共2465字，建议阅读5分钟。本文为大家解读怎样用脚本与百度API的交互，爬取百度地图的数据。需求描述对于数据挖掘工程师来说，有时候需要抓取地理位置信息，比如统计房子周边基础设施信息，比如医院、公交车站、写字楼、地铁站、商场等，一般的爬虫可以采用python脚本爬取,有很多成型的框架如scrapy，但是想要爬百度地图就必须遵循它的JavaScript Api，htt
【百度地图】百度地图实现仿链家地图搜房功能
wan小小冰的博客
01-04 6617
最近看见链家有地图搜房功能，了解了一下之后发现其实都是一些基础的百度地图功能，现模拟数据实现一下： 注：用百度地图之前请引入百度地图相关库的地址和百度地图JavaScript API的秘钥，此篇中用的如下： （1）：jquery-2.2.3.min.js (2)：&lt;script type="text/javascript" src="https://api.map....
百度地图api点聚合简单demo实例
zhm0303的博客
03-14 1941
关于百度地图点聚合的demo示例，如果直接复制代码到项目的话，需要把v2.0改成V1.4,因为v2.0需要添加密钥v1.4不用 hello 点聚合 body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #container{width:100%;height:500px;}
基于大数据的房价分析--3.echart+百度地图实现数据可视化
qq_35488769的博客
12-14 8362
要实现的是在百度地图中画出房屋散点图,能进行区域选择,动态刷新显示该区域的房价数据雷达图,具体效果如下 1.在echarts中集成百度地图要使用百度地图,必须要有开发者AK和百度地图js包<script src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script> <script src="/Plug-in/echarts-master/di
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值