百度地图根据缩放级别显示不同的marker点和窗口内容

<script type="text/javascript">

var markers = [];

      $(document).ready(function() {
          getdata();
          initMap();//显示地图
          setInterval("frash()", 1000); //定时器,每3秒调用frash()
          
      });
      function getdata() {
        markers=transArr({$list|json_encode=true});
        school_markers = transArr({$school_list|json_encode=true});
        console.log(school_markers);
      }


      function transArr(obj) {  
        var tem=[];  
        $.each(obj, function(i) {  
            tem[i]=obj[i];  
        });  
        return tem;  
    }


  </script>
    <script type="text/javascript">
      //创建和初始化地图函数:
      function initMap() {
          //alert("111"+markers[0].lat);
          createMap();//创建地图
          setMapEvent();//设置地图事件
          addMapControl();//向地图添加控件
          addMapOverlay();//向地图添加覆盖物
      }
      function createMap() {
          map = new BMap.Map("map"); //建树Map实例
          map.centerAndZoom(new BMap.Point(110.337, 35.316), 6);// 建树点坐标,初始化地图,设置中心点坐标和地图级别。


          map.setMapStyle({
              styleJson: [{"featureType": "highway","elementType": "all","stylers": {
                  "visibility": "off" 
                }
            }]
        });




  
     }
     function setMapEvent() {
         map.enableScrollWheelZoom();//启用地图滚轮放大缩小
         map.enableKeyboard();//启用键盘上下左右键移动地图
         map.enableDragging(); //启用地图拖拽事件,默认启用(可不写)
         map.enableDoubleClickZoom()//启用鼠标双击放大,默认启用(可不写)
     }
      //点击事件
        function addClickHandler(html,marker){  
            marker.addEventListener("click",function(e){  
            openInfo(""+html,e)});  
        } 


    function frash() {
        map.clearOverlays();//清空地图上标注点
        getdata(); //获得marker点的数组
        addMapOverlay(); //将marker点的信息显示在地图上
        markers.splice(0, markers.length);//清空数组
    }
    //设置点Icon
     function addMapOverlay() {
        var u = map.getZoom(); // 定义地图缩放等级的变量
        console.log(u);
         if (u <= 5) {   // 如果缩放等级小于等于5
             //把marker点的信息显示在地图上
            for (var index = 0; index < markers.length; index++) {
                //var point = new BMap.Point(markers[index].lng,markers[index].lat);
                var p0 = markers[index].lng;
                var p1 = markers[index].lat;
                console.log("p0:"+p0);
                var point = new BMap.Point(p0, p1);
                var myIcon = new BMap.Icon("__STATIC__/image/room_position.png",new BMap.Size(40,40));    //assets/img/ict-mem04.png
                var marker = new BMap.Marker(new BMap.Point(p0,p1), { icon: myIcon });               
                var html = [];
                    html.push('<ul style="table-layout:fixed;width:100%;font:15px arial,simsun,sans-serif">');
                    html.push('<li style="width:100%;list-style:none;height:30px;border-bottom:1px solid #DADADD;position:relative" id="mark_info"><span style="position:absolute;">地址:'+markers[index].zone_name+'</span></li>');
                    
                    html.push('<li style="width:100%;list-style:none;padding-top:10px;padding-bottom:10px;border-bottom:0px solid #DADADD"><span style="position:absolute;">数量:'+markers[index].count+'</span></li>');
                                      
                    // html.push('<li style="width:100%;list-style:none;padding-top:10px;padding-bottom:10px;">商户地址:'+this.nearshoplist[i].address+'</li>');
                    html.push('</ul>'); 
                    var html = html.join("");
                    //console.log(html);


                    map.addOverlay(marker);               // 将标注添加到地图中
                    addClickHandler(html,marker);
             }
        //地图缩放等级大于5不显示marker点
            }else{
                 //把marker点的信息显示在地图上
            for (var i = 0; i < school_markers.length; i++) {
                //var point = new BMap.Point(markers[index].lng,markers[index].lat);
                var p0 = school_markers[i].lng;
                var p1 = school_markers[i].lat;
                console.log("p0:"+p0);
                var point = new BMap.Point(p0, p1);
                var myIcon = new BMap.Icon("__STATIC__/image/red_icon.png",new BMap.Size(40,30));    //assets/img/ict-mem04.png
                var marker = new BMap.Marker(new BMap.Point(p0,p1), { icon: myIcon });               
                var html = [];
                    html.push('<ul style="table-layout:fixed;width:100%;font:15px arial,simsun,sans-serif">');
                    html.push('<li style="width:100%;list-style:none;height:30px;border-bottom:1px solid #DADADD;position:relative" id="mark_info"><span style="position:absolute;">地址:'+school_markers[i].school_name+'</span></li>');
                    
                    html.push('<li style="width:100%;list-style:none;padding-top:10px;padding-bottom:10px;border-bottom:0px solid #DADADD"><span style="position:absolute;">数量:'+school_markers[i].school_name+'</span></li>');
                                      
                    // html.push('<li style="width:100%;list-style:none;padding-top:10px;padding-bottom:10px;">商户地址:'+this.nearshoplist[i].address+'</li>');
                    html.push('</ul>'); 
                    var html = html.join("");
                    //console.log(html);


                    map.addOverlay(marker);               // 将标注添加到地图中
                    addClickHandler(html,marker);
             }
            }


     }


     //生成窗体
        function openInfo(html,e){  
            var p = e.target;  
            console.log("lng:"+p.getPosition().lng);
            console.log("lat:"+p.getPosition().lat);
            var opts = {
                    width : 100     // 信息窗口宽度
                    //height: 80,     // 信息窗口高度
                    //title : "信息窗口" , // 信息窗口标题
                   // enableMessage:true//设置允许信息窗发送短息
            };
            var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);  
            var infoWindow = new BMap.InfoWindow(html,opts);  // 创建信息窗口对象   
            map.openInfoWindow(infoWindow,point);                //开启信息窗口  
        }


     //向地图添加控件
    function addMapControl() {
        var scaleControl = new BMap.ScaleControl({
            anchor : BMAP_ANCHOR_BOTTOM_LEFT
        });
         scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
         map.addControl(scaleControl);
         var navControl = new BMap.NavigationControl({
             anchor : BMAP_ANCHOR_TOP_LEFT,
            type : BMAP_NAVIGATION_CONTROL_LARGE
         });
         map.addControl(navControl);
         var overviewControl = new BMap.OverviewMapControl({
            anchor : BMAP_ANCHOR_BOTTOM_RIGHT,
            isOpen : true
         });
         map.addControl(overviewControl);
     }
     var map;
    //  initMap();

猜你喜欢

转载自blog.csdn.net/qq_34815528/article/details/80424251
今日推荐