map1.png

<!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" />
   <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->    
   <style>
      html,body{width: 100%; height: 100%; margin:0; padding: 0;}
      .container{height: 100%;}
      .left,.right{float: left;}
      .left{width: 300px; height: 100%; border-right: 1px solid #158820;}
      .right{position: absolute; left: 305px; bottom: 0; right: 0; top: 0; height: 100%; }

      /* 解决聚合区域覆盖问题 */
      .BMapLabel:hover{ background: rgba(244, 84, 84, 0.9)!important; z-index: 999999!important;}
   </style>
   <script type="text/javascript" src="js/jquery2.1.1.min.js"></script>
   <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=3.0&ak=key"></script>

   <title>百度地图仿搜房网效果</title>

</head>
<body>
<div class="container">
    
    <div class="left">
1111
    </div>

    <div class="right" id="baidumap"></div>
</div>


</body>
</html>

<script type="text/javascript">
   var plys = {},
      boundary = new BMap.Boundary();

   // 创建Map实例
   var map = new BMap.Map("baidumap");
   // 初始化地图,设置中心点坐标和地图级别
   map.centerAndZoom(new BMap.Point(104.06792346, 30.67994285), 12);

   // ...............获取当前城市..............
   /*
   var geolocation = new BMap.Geolocation();
   geolocation.getCurrentPosition(function(r){
      if(this.getStatus() == BMAP_STATUS_SUCCESS){
         var mk = new BMap.Marker(r.point);
         map.addOverlay(mk);
         map.panTo(r.point);
         //alert('您的位置：'+r.point.lng+','+r.point.lat);
         map.centerAndZoom(new BMap.Point(r.point.lng, r.point.lat), 12);
      } else {
         alert('failed'+this.getStatus());
      }        
   },{
      enableHighAccuracy: true
   });
   */
   // 缩略地图    默认位于地图右下方，是一个可折叠的缩略地图
   map.addControl(new BMap.OverviewMapControl());   
   // 平移缩放控件  PC端默认位于地图右方
   map.addControl(new BMap.NavigationControl({enableGeolocation: true, anchor: BMAP_ANCHOR_TOP_RIGHT}));    
   // 比例尺 
   map.addControl(new BMap.ScaleControl());    
   // 开启鼠标滚轮缩放
   map.enableScrollWheelZoom(true);
   // 添加城市列表
   map.addControl(new BMap.CityListControl({
       //anchor: BMAP_ANCHOR_TOP_LEFT,
       //offset: new BMap.Size(10, 20),
       // 切换城市之间事件
       // onChangeBefore: function(){
       //    alert('before');
       // },
       // 切换城市之后事件
       // onChangeAfter:function(){
       //   alert('after');
       // }
   }));


   var areaData = [
        {"code":"1","name":"青羊区","longitude":"104.05","latitude":"30.68","count":"115"},
        {"code":"2","name":"武侯区","longitude":"104.05","latitude":"30.65","count":"64"},
        {"code":"3","name":"金牛区","longitude":"104.05","latitude":"30.70","count":"434"},
        {"code":"4","name":"成华区","longitude":"104.10","latitude":"30.67","count":"122"},
        {"code":"5","name":"温江区","longitude":"103.83","latitude":"30.70","count":"66"},
        {"code":"6","name":"双流区","longitude":"103.92","latitude":"30.58","count":"23"},
        {"code":"7","name":"郫都区","longitude":"103.88","latitude":"30.82","count":"459"},
        {"code":"8","name":"龙泉驿区","longitude":"104.27","latitude":"30.57","count":"55"}
    ];

    $.each(areaData, function(index, data) {
      var point = new BMap.Point(data.longitude, data.latitude);
      //自定义label样式
      var tpl = '<div class="area-count" style="text-align: center; color: #fff;" data-longitude="' + data.longitude + '"' +
         ' data-latitude="' + data.latitude + '" data-id="' + data.code + '">' +
         '<p style="margin-top: 25px; font-size: 14px;" 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.disableMassClear();
      // 当鼠标悬停在label上时显示行政区划边界
      myLabel.addEventListener("mouseover", function (event) {
         //myLabel.setStyle({background:"rgba(241,80,68,.9)"}); //修改覆盖物背景颜色
         //var regionName = myLabel.getTitle();
         //getBoundary(data, tpl);
         var lab = event.target,
            boundaries = plys[lab.getContent()];
         for (var i = 0; i < boundaries.length; i++) {
            boundaries[i].show();
         }
      });
      myLabel.addEventListener("mouseout", function (event) {
         //map.clearOverlays();
         var lab = event.target,
            boundaries = plys[lab.getContent()];
         for (var i = 0; i < boundaries.length; i++) {
            boundaries[i].hide();
         }
      });

      // 行政区域预加载-闭包
        plys[tpl] = [];
      (function (tpl) {
            boundary.get(data.name, function (rs) {
                var count = rs.boundaries.length;
                for (var i = 0; i < count; i++) {
                    var ply = new BMap.Polygon(rs.boundaries[i], {
                        strokeWeight: 2,
                        strokeOpacity: 0.8,
                        StrokeStyle: "solid",
                        strokeColor: "rgb(244, 84, 84)",
                        fillColor: "rgb(244, 84, 84)",
                        fillOpacity: 0.2
                    });
                    // console.log(tpl);
                    map.addOverlay(ply);  //添加覆盖物
                    plys[tpl].push(ply);
                    ply.hide(); // 初始化隐藏边界
                }
         });
      }) (tpl)
    });

</script>