• 百度地图的简单使用


    //  常见问题
    $(document).ready(function(){
        //  添加页面头部与尾部
        atc_header({index:3});
    
        //  加载数据
        load_datas();
    })
    var current_page_temp = [];
    var exis_city_list = [];
    var current_site = [];
    var all_site = [];
    var all_maker = [];
    var map;
    var site_type = [{
        text: '全部充电站点',
        val : '',
        list : [],
        list2 : []
    },{
        text:'普通站',
        val:'SITE_TYPE_GENERAL',
        list : [],
        list2 : []
    },{
        text:'加盟站点',
        val:'SITE_TYPE_JOIN',
        list : [],
        list2 : []
    },{
        text:'中心站',
        val:'SITE_TYPE_CENTRAL',
        list : [],
        list2 : []
    }];
    
    var Select2 = null;
    
    var load_datas = function(){
    
        var Select1 = new ATC.UI.select({
            id:'select1',
            136,
            deftext:'--请选择--',
            data:[
    //            {text:'南山区',val:0},
    //            {text:'福田区',val:1}
            ]
            ,selectCallback : function(data){
                var t_str = $('.current-city').text() + data.text;
                myValue = t_str;
                setPlace();
            }
        })
    
        Select2 = new ATC.UI.select({
            id:'select2',
            deftext:'全部充电站点',
            cls:'r mr10',
            showcheckbox : true,
            data:site_type,
            selectCallback : function(data){
                custom_load_data(1,data.val,show_site,_temp_marker.temp);
            }
        })
    
        $('#h_n_select2').bind('change',function(){
            if($('#h_n_select2').attr('checked')=='checked'){
                show_site = 'hide';
            }else{
                show_site = '';
            }
        });
    
        //  当前所在地名称
        var current_prov = '';                                              //  当前省份
        var current_city = '';                                              //  当前城市
        var current_area = '';                                              //  当前区/县
        var current_status = '';
        var show_site = '';                                                 //  非空闲展示?
        var _temp_marker = {
            temp : []
        };                                            //  临时marker
    
        // 百度地图API功能
        map = new BMap.Map("mapBox");    // 创建Map实例
        //map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
    
        map.centerAndZoom('深圳', 14);
    
    //    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
    //    map.setCurrentCity("深圳");          // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    
    //    setTimeout(function () {
            load_city_data();
            changecity(map);
    //    },0);
    
        //  加载站点类型 stop
    
        map.addEventListener("moveend", function(e){              //  鼠标移动,动态获取当前 城市位置
    
    //        //  加载数据前移除所有覆盖物
    //        map.clearOverlays();
    
            var point_ = new BMap.Point(map.getCenter().lng,map.getCenter().lat);//
            var geoc = new BMap.Geocoder();
            geoc.getLocation(point_, function(rs){
                var addComp = rs.addressComponents;
    //            console.log(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
                current_prov = addComp.province;
                current_city = addComp.city;
                current_area = addComp.district;
    
                //  设置当前城市
                $('.view-text .text').html(current_city.replace('市',''));
                $('.current-city').html(current_city);
    
                //  如果当前城市存在与已开通城市列表,则进行下拉框绑定
                setTimeout(function(){
                    for(var ii = 0; ii < exis_city_list.length; ii++){
                        if(exis_city_list[ii].name == current_city){
                            var _t_list = exis_city_list[ii].list;
                            var _t_arr = [];
                            for(var jj = 0; jj < _t_list.length; jj++){
                                _t_arr.push({
                                    text : _t_list[jj].name,
                                    val : _t_list[jj].name
                                });
                            }
                            Select1.render(_t_arr);
                        }else{
                            Select1.render([]);
                        }
                    }
                },0);
    
                load_site(1,current_prov,current_city,current_area,addMarker,current_status,show_site,_temp_marker);
            });
    
        });
    
        //  搜索框功能  start
        var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
            {"input" : "suggestId"
            ,"location" : map
            });
    
        var myValue;
        ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
            var _value = e.item.value;
            myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    
            setPlace();
        });
    
        /**
         * 搜索目的地
         */
        function setPlace(){
            map.clearOverlays();    //清除地图上所有覆盖物
            function myFun(){
                var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                map.centerAndZoom(pp, 18);
                map.addOverlay(new BMap.Marker(pp));    //添加标注
    //                alert("当前定位城市:"+cityName);
            }
            var local = new BMap.LocalSearch(map, {     //智能搜索
                onSearchComplete: myFun
            });
            local.search(myValue);
        }
    
        $('.search-txt').bind({
            'focus':function(){
                if($(this).val() == ''){
                    $('.show_searchInfo').hide();
                }
            },
            'blur' : function(){
                if($(this).val() == ''){
                    $('.show_searchInfo').show();
                }
            },
            'keydown':function(){
                var event = event ? event : (window.event ? window.event : null);
                if($(this).val() != '' && event.keyCode == 13){
                    //  按回车,则进行关键字检索
                    myValue = $(this).val();
    
                    setPlace();
    //                load_site(1,current_prov,current_city,current_area,addMarker);
                }
            }
        });
    
        $('.search-btn').click(function(){
            if($('.search-txt').val() != ''){
                myValue = $('.search-txt').val();
    
                setPlace();
    //            load_site(1,current_prov,current_city,current_area,addMarker);
            }
        });
        //  搜索框功能  stop
    
        //  添加后台提供的标注   start           //  必须先加载数据,再定位。否则出错
        function addMarker(point,status,id,index){
            var myIcon = new BMap.Icon("home/image/site_all.png", new BMap.Size(25,35),{
                 imageOffset: new BMap.Size(-27*index, 0)   // 设置图片偏移
            });
            if(status == 'yes'){            //  空闲的
                myIcon = new BMap.Icon("home/image/site_all.png", new BMap.Size(25,35),{
                    imageOffset: new BMap.Size(-27*index, -33)   // 设置图片偏移
                });
            }else if(status == 'no'){
                myIcon = new BMap.Icon("home/image/site_all.png", new BMap.Size(25,35),{
                    imageOffset: new BMap.Size(-27*index, 0)   // 设置图片偏移
                });
            }
            var marker = new BMap.Marker(point,{icon:myIcon});
            map.addOverlay(marker);
    
            //  标注悬浮/离开事件 start
            marker.addEventListener("mouseover",function(){
                var _ma_self = this;
                for(var i = 0; i < all_site.length; i++){
                    map.removeOverlay(all_site[i].cont);
                }
    
    //                alert(id)
                //  悬浮时对应左侧的显示
                $('.map-station-ls li').each(function(li_obj){
                    var _self_ = this;
                    if($(_self_).attr('val') == id){
                        $(_self_).find('.img_position_class').css({'background-position-y':'-226px'});
                    }else{
                        $(_self_).find('.img_position_class').css({'background-position-y':'-195px'});
                    }
                });
    
                var myIcon1 = new BMap.Icon("home/image/site_all.png", new BMap.Size(32,40),{
                    imageOffset: new BMap.Size(3-30*index, -71)   // 设置图片偏移
                });
                var marker1 = new BMap.Marker(point,{icon:myIcon1});
                map.addOverlay(marker1);
    
                all_site.push({
                    id : id,
                    cont : marker1
                });
                //  标注点击事件  start
                marker1.addEventListener("click",function(){                                     //  因使用到函数外面的数据,未进行再封装
                    click_show_window(marker,id);
                });
                //  标注点击事件 stop
    
                marker1.addEventListener("mouseout",function(e){
    //                alert(id)
                    for(var i = 0; i < all_site.length; i++){
                        map.removeOverlay(all_site[i].cont);
                    }
    
                    $('.map-station-ls li').each(function(li_obj) {
                        var _self_ = this;
                        if ($(_self_).attr('val') == id) {
                            $(_self_).find('.img_position_class').css({'background-position-y': '-195px'});
                        }
                    })
                });
            });
    
            current_site.push({
                id : id,
                cont : point
            });
    
            all_maker.push({
                id : id,
                cont : marker
            })
    
            //  标注悬浮/离开事件 stop
        }
        //  添加后台提供的标注   stop
    
        //  浏览器定位 OR ip定位 start
        if(navigator.geolocation){
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function(r){
                if(this.getStatus() == BMAP_STATUS_SUCCESS){
                    var mk = new BMap.Marker(r.point);  //基于定位的这个点的点位创建marker
                    map.addOverlay(mk);     //  将marker作为覆盖物添加到map地图上
                    map.panTo(r.point);     //将地图中心点移动到定位的这个点位置。注意是r.point而不是r对象。
    //                    $('.search-txt').val('您的位置:'+r.point.lng+','+r.point.lat);
                    var geoc = new BMap.Geocoder();
                    geoc.getLocation(r.point, function(rs){
                        var addComp = rs.addressComponents;
    //                        alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
                        current_prov = addComp.province;
                        current_city = addComp.city;
                        current_area = addComp.district;
                        //  设置当前城市
                        $('.view-text .text').html(current_city.replace('市',''));
                        $('.current-city').html(current_city);
    
    //                    load_site(1,current_prov,current_city,current_area,addMarker);
                    });
                }
                else {              //  定位失败
    //                    alert('failed'+this.getStatus());
                    //  进行IP定位
                    function myFun(result){
                        var cityName = result.name;
                        map.setCenter(cityName);
                        current_city = cityName;
                        var point = new BMap.Point(result.center.lng,result.center.lat);//
                        var geoc = new BMap.Geocoder();
                        geoc.getLocation(point, function(rs){
                            var addComp = rs.addressComponents;
    //                    alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
                            current_prov = addComp.province;
                            current_city = addComp.city;
                            current_area = addComp.district;
                        });
                        //  设置当前城市
                        $('.view-text .text').html(current_city.replace('市',''));
                        $('.current-city').html(current_city);
    
    //                    load_site(1,current_prov,current_city,current_area,addMarker);
                    }
                    var myCity = new BMap.LocalCity();
                    myCity.get(myFun);
                }
            },{enableHighAccuracy: true})
            //关于状态码
            //BMAP_STATUS_SUCCESS    检索成功。对应数值“0”。
            //BMAP_STATUS_CITY_LIST    城市列表。对应数值“1”。
            //BMAP_STATUS_UNKNOWN_LOCATION    位置结果未知。对应数值“2”。
            //BMAP_STATUS_UNKNOWN_ROUTE    导航结果未知。对应数值“3”。
            //BMAP_STATUS_INVALID_KEY    非法密钥。对应数值“4”。
            //BMAP_STATUS_INVALID_REQUEST    非法请求。对应数值“5”。
            //BMAP_STATUS_PERMISSION_DENIED    没有权限。对应数值“6”。(自 1.1 新增)
            //BMAP_STATUS_SERVICE_UNAVAILABLE    服务不可用。对应数值“7”。(自 1.1 新增)
            //BMAP_STATUS_TIMEOUT    超时。对应数值“8”。(自 1.1 新增)
        }else{
    //            alert("您的浏览器不支持地理定位");
            //  进行IP定位
            function myFun(result){
                var cityName = result.name;
                map.setCenter(cityName);
                current_city = cityName;
                var point = new BMap.Point(result.center.lng,result.center.lat);//
                var geoc = new BMap.Geocoder();
                geoc.getLocation(point, function(rs){
                    var addComp = rs.addressComponents;
    //                    alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
                    current_prov = addComp.province;
                    current_city = addComp.city;
                    current_area = addComp.district;
                });
    //                alert("当前定位城市:"+cityName);
                //  设置当前城市
                $('.view-text .text').html(current_city.replace('市',''));
                $('.current-city').html(current_city);
    
    //            load_site(1,current_prov,current_city,current_area,addMarker);
            }
            var myCity = new BMap.LocalCity();
            myCity.get(myFun);
        }
    
        //  浏览器定位 stop
    
        $('.mapbtn-fullscreen').click(function(){           //  点击全屏时的效果
            if($('.atc-mapbox-right').hasClass('fulll_screen')){
                $('.atc-mapbox-right').removeClass('fulll_screen');
                $('.mapbtn-fullscreen').html('全屏');
                $('html').css({'overflow':'auto'});
            }else{
                $('.atc-mapbox-right').addClass('fulll_screen');
                $('.mapbtn-fullscreen').html('退出全屏');
                $('html').css({'overflow':'hidden'});
            }
        });
    
        $('.c_right_div').mousedown(function(){          //  点击时,电桩向右侧滑动
            var l_0 = null;
            l_0 = setInterval(function(){
                var _lef = parseInt($('.scroll-cont').css('left').replace('px',''));
                if(_lef + $('.scroll-cont').width() > $('.scroll-area').width()){
                    $('.scroll-cont').css({'left':parseInt(_lef-40)+'px'});
                }else{
                    if(null != l_0){
                        window.clearInterval(l_0);
                    }
                }
            },100);
    
            $('.c_right_div').mouseup(function(){
                if(null != l_0){
                    window.clearInterval(l_0);
                }
            })
    
            $('.c_right_div').mouseout(function(){
                if(null != l_0){
                    window.clearInterval(l_0);
                }
            })
        });
    
        $('.c_left_div').mousedown(function(){          //  点击时,电桩向左侧滑动
            var r_0 = null;
            r_0 = setInterval(function(){
                if(parseInt($('.scroll-cont').css('left').replace('px','')) < 0){
                    $('.scroll-cont').css({'left':parseInt(parseInt($('.scroll-cont').css('left').replace('px',''))+40)+'px'});
                }else{
                    if(null != r_0){
                        window.clearInterval(r_0);
                    }
                }
            },100);
    
            $('.c_left_div').mouseup(function(){
                if(null != r_0){
                    window.clearInterval(r_0);
                }
            })
    
            $('.c_left_div').mouseout(function(){
                if(null != r_0){
                    window.clearInterval(r_0);
                }
            })
        });
    
        //  隐藏电桩  close
        $('.div_hidden_close').click(function(){
            $('.map-stations').hide();
            $('.scroll-cont').html('');
        });
    
    //    //  城市列表切换效果
    //    changecity(map);
    }
    
    var changecity = function(map){
        $('#cityBox').hover(
            function(){$(this).addClass('citybox-hover')},
            function(){$(this).removeClass('citybox-hover')}
        )
            .click(function(){
                $(this).addClass('citybox-dropdown');
                return false;
            })
            .find('.btn-close').click(function(){
                $(this).parents('.citybox').removeClass('citybox-dropdown').removeClass('citybox-hover');
                return false;
            });
        $('#cityBox').find('.city-a').click(function(){
            //  切换城市  并定位
            $(this).parents('.citybox').find('.text').text($(this).text());
            $(this).parents('.citybox').find('.current-city').text($(this).text()+'市');
            $(this).parents('.citybox').find('.btn-close').click();
    
            //  定位  并获取城市内的 区域(数据库查询)
            map.centerAndZoom($(this).text(),11);
            return false;
        });
        $(document).click(function(){
            $('.citybox').removeClass('citybox-hover').removeClass('citybox-dropdown');
        })
    }
    
    /**
     * 查询站点信息及数据
     * @param page              //  当前显示页
     * @param current_prov      //  当前省份
     * @param current_city      //  当前城市
     * @param current_area      //  当前区域
     * @param site_stauts       //  当前状态
     * @param addMarker         //  引入方法
     */
    var load_site = function(page,current_prov,current_city,current_area,addMarker,current_status,show_site,_temp_marker){
        _temp_marker.temp = addMarker;
    //
    //    current_prov= '';
    //    current_city = '';
        current_area = '';
    
        var dataPara = {
            province : current_prov,
            city : current_city,
            area : current_area
        };
    
        //  加载出所有数据,进行分类
        $.ajax({
            type: 'post',
            url: system_param.url + '/api/v1/plat/query_site_list',
            async: false,
            dataType: 'text',
            data: dataPara,
            success: function (msg) {
                var obj = eval('(' + msg + ')');//转换后的JSON对象
                var list = obj.list;
    //            site_type;
    
                //  先将数据进行清空
                for(var i = 0; i < site_type.length; i++){
                    site_type[i].list = [];
                    site_type[i].list2 = [];
                }
    
                for(var i = 0; i < list.length; i++){
                    site_type[0].list.push(list[i]);
                    //  非空闲状态的隐藏
                    if(list[i].deviceSurplusNum>0){
                        site_type[0].list2.push(list[i]);
                    }
                    for(var j = 1; j < site_type.length; j++){
                        if(list[i].siteType == site_type[j].val){
                            site_type[j].list.push(list[i]);
                            //  非空闲状态的隐藏
                            if(list[i].deviceSurplusNum > 0){
                                site_type[j].list2.push(list[i]);
                            }
                        }
                    }
                }
                var _site_type = [];
                for(var i =0 ; i < site_type.length; i++){
                    var _text = site_type[i].text+'('+site_type[i].list.length;
                    _site_type.push({
                        text : _text,
                        val : site_type[i].val,
                        list : site_type[i].list,
                        list2 : site_type[i].list2
    
                    });
                }
                Select2.render(_site_type);
            }
        });
    
        custom_load_data(page,current_status,show_site,addMarker);
    }
    
    var custom_load_data = function(page,site_stauts,is_show,addMarker){
        //  加载数据前移除所有覆盖物
        map.clearOverlays();
        //  添加中心点
        var point_ = new BMap.Point(map.getCenter().lng,map.getCenter().lat);//
        var marker1 = new BMap.Marker(point_);              //  当前中心点的位置
        map.addOverlay(marker1);
    
        if($('#h_n_select2').attr('checked')=='checked'){
            show_site = 'hide';
        }else{
            show_site = '';
        }
    
        var list_page;
        var count_ = 0;                      //  总数
                                             //  分页的需要先查询所有数据条数再进行分页
        for(var i = 0; i < site_type.length; i++){
            if(site_stauts == site_type[i].val){
                if(is_show == ''){                          //  默认为0   打勾的为隐藏   即使用list2
                    list_page = site_type[i].list;
                }else{
                    list_page = site_type[i].list2;
                }
            }
        }
    
        count_ = list_page.length;
    
        load_site_page(page,site_stauts,is_show,addMarker,list_page);
    
        load_a_page(count_,page,site_stauts,is_show,addMarker,list_page);
    }
    
    /**
     * 加载海量小点点
     */
    var load_all_small_marker = function(list){
        setTimeout(function(){
            for(var i = 0; i < list.length; i++){
                var point = new BMap.Point(list[i].longitude,list[i].latitude);
                var t_status = list[i].deviceSurplusNum < 1 ? 'no' : 'yes';
                var myIcon;
                if(status == 'yes'){            //  空闲的
                    myIcon = new BMap.Icon("home/image/green.png", new BMap.Size(14,21),{
                    });
                }else if(status == 'no'){
                    myIcon = new BMap.Icon("home/image/red.png", new BMap.Size(14,21),{
                    });
                }
                var marker = new BMap.Marker(point,{icon:myIcon});
                map.addOverlay(marker);
            }
        },0);
    }
    
    var load_site_page = function(page,site_stauts,is_show,addMarker,list_page){
        var p = page;
        var s = 10;
        var list = [];
        var list_all = [];
    
        for(var i = 0; i < list_page.length; i++){
            if((i+1) <= p*10 && (i+1) > (p-1)*10){
                list.push(list_page[i]);
            }else{
                list_all.push(list_page[i]);
            }
        }
    
        //  添加海量点
        load_all_small_marker(list_all);
    
        var t_html_s = '<div id="site_all_info">';
        t_html_s+= '<ul class="map-station-ls clearfix">';
        t_html_s+= '</ul>';
        t_html_s+= '<div class="atc-list-page tc pt30 pb20 clearfix">';
        t_html_s+= '<span class="atc-pages">';
        t_html_s+= '<a href="#" class="btn-prev">&lt;</a>';
        t_html_s+= '<a href="#" class="btn-a cur">1</a>';
        t_html_s+= '<a href="#" class="btn-a">2</a>';
        t_html_s+= '<a href="#" class="btn-a">3</a>';
        t_html_s+= '<a href="#" class="btn-next">&gt;</a>';
        t_html_s+= '</span>';
        t_html_s+= '</div>';
    
        t_html_s+= '</div>';
    
        $('#site_all_info').replaceWith($(t_html_s));               //  清空站点信息
        var _html = '';
    
        current_site = [];
        all_maker = [];
        current_page_temp = [];
        for(var i = 0; i < list.length; i++){
            var point = new BMap.Point(list[i].longitude,list[i].latitude);
            var t_status = list[i].deviceSurplusNum < 1 ? 'no' : 'yes';
    
            addMarker(point,t_status,list[i].id,i);               //  加载地图上的标注
            current_page_temp.push({
                id : list[i].id,
                num1 : list[i].deviceSurplusNum,
                totalNum : list[i].deviceTotalNum
            });
    
            //          加载左侧的站点信息
            _html+= '<li val="'+list[i].id+'" >';
            if(i == 0){
                _html+= '<div class="title"><a style="background-position-x:2px;background-position-y: -195px " class="img_position_class">&nbsp;</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+list[i].name+'</div>';
            }else{
                var x_n = 2 - i*24.1;
                _html+= '<div class="title"><a style="background-position-x:'+x_n+'px;background-position-y: -195px " class="img_position_class">&nbsp;</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+list[i].name+'</div>';
            }
            _html+= '<div class="cont">';
            _html+= '<div class="addr">地址:'+list[i].address+'</div>';
            _html+= '<div class="status">';
            _html+= '充电设备:<span class="mr10">剩余 <span class="red">'+list[i].deviceSurplusNum+'</span> 个</span>总共 <span class="red">'+list[i].deviceTotalNum+'</span> 个';
            _html+= '</div>';
            _html+= '</div> ';
            _html+= '</li>';
        }
        $('.map-station-ls').html(_html);
    
    
        var t_marker;
        $('.map-station-ls li').hover(
            function(){
                $(this).find('.img_position_class').css({'background-position-y':'-226px'});
                for(var i = 0; i < current_site.length; i++){
                    if(current_site[i].id == $(this).attr('val')){
                        var point_t = current_site[i].cont;
    
                        var myIcon1 = new BMap.Icon("home/image/site_all.png", new BMap.Size(32,40),{
                            imageOffset: new BMap.Size(3-30*i, -71)   // 设置图片偏移
                        });
                        var marker1 = new BMap.Marker(point_t,{icon:myIcon1});
                        map.addOverlay(marker1);
                        t_marker = marker1;
                        all_site.push({
                            id : current_site[i].id,
                            cont : marker1
                        });
                    }
                }
            },
            function(){
                $(this).find('.img_position_class').css({'background-position-y':'-195px'});
                for(var i = 0; i < all_site.length; i++){
                    map.removeOverlay(all_site[i].cont);
                }
            }
        );
    
        $('.map-station-ls li').bind('click',function(){               //  li点击时   弹出窗体
            var t_id = $(this).attr('val');
            for(var j = 0; j < all_maker.length; j++){
                if(all_maker[j].id == t_id){
                    click_show_window(all_maker[j].cont,t_id);
                }
            }
        });
    
        scroll_d('site_all_info');
    }
    
    /**
     * 进行分页
     * @param count   总数据条数
     * @param curr_p    当前页
     */
    var load_a_page = function(count, curr_p,site_stauts,is_show,addMarker,list_page){           //  加载总共多少页    第二个参数为:当前跳转的页   //  控制默认样式
        if(count > 1){
            var show_a_num = 3;                         //  默认显示a标签个数
            var curr_page_page = 1;                     //  默认当前显示底部页数的页数
            if(curr_p > show_a_num){
                curr_page_page = Math.floor(curr_p%show_a_num==0?curr_p/show_a_num:curr_p/show_a_num+1);
            }
            var sum_page = Math.floor(count%10==0?count/10:count/10+1);             //  计算总页数
            var sum_page_page = Math.floor(sum_page%show_a_num==0?sum_page/show_a_num:sum_page/show_a_num+1);         //  a 标签的总页数
    
            var t_html = '<span class="atc-pages">';
            t_html+= '<a class="btn-prev">&lt;</a>';
            t_html+= '<span id="a_span">';
            for(var i = ((curr_page_page-1)*show_a_num+1); i <= (show_a_num*curr_page_page); i++){
                if(i <= sum_page){
                    if(i == curr_p){
                        t_html+= '<a href="#" class="btn-a cur">'+i+'</a>';
                    }else{
                        t_html+= '<a href="#" class="btn-a">'+i+'</a>';
                    }
                }
            }
            t_html+= '</span>';
            t_html+= '<a class="btn-next">&gt;</a>';
            t_html+= '</span>';
            $('.atc-list-page').html(t_html);
            $('.atc-list-page').show();
    
            $('.atc-pages .btn-prev').click(function(){             //  上一页
                if(curr_page_page > 1){
                    curr_page_page--;
    
                    t_html = '';
                    for(var i = ((curr_page_page-1)*show_a_num+1); i <= (show_a_num*curr_page_page); i++){
                        if(i <= sum_page){
                            if(i == curr_p){
                                t_html+= '<a href="#" class="btn-a cur">'+i+'</a>';
                            }else{
                                t_html+= '<a href="#" class="btn-a">'+i+'</a>';
                            }
                        }
                    }
                    $('#a_span').html(t_html);
                }
            });
    
            $('.atc-pages .btn-next').click(function(){            //   下一页
                if(curr_page_page < sum_page_page){
                    curr_page_page++;
    
                    t_html = '';
                    for(var i = ((curr_page_page-1)*show_a_num+1); i <= (show_a_num*curr_page_page); i++){
                        if(i <= sum_page){
                            if(i == curr_p){
                                t_html+= '<a href="#" class="btn-a cur">'+i+'</a>';
                            }else{
                                t_html+= '<a href="#" class="btn-a">'+i+'</a>';
                            }
                        }
                    }
                    $('#a_span').html(t_html);
                }
            });
    
            $('#a_span').find('a').live('click',function(){
                //  重新加载页面数据
                load_site_page($(this).html(),site_stauts,is_show,addMarker,list_page);
    
                load_a_page(count,$(this).html(),site_stauts,is_show,addMarker,list_page);
            });
        }else{
            $('.atc-list-page').html('');
        }
    }
    
    var click_show_window = function(marker, id){
        var p = marker.getPosition();       //获取marker的位置
    //                alert('id='+id+'       marker的位置是' + p.lng + ',' + p.lat);
        //  点击标注  显示当前标注上的站点基本信息   查询所有的充电电桩
    
        var sContent = '站点正在开发中';
    //    id = 1;
        $.ajax({
            type: 'post',
            url: system_param.url + '/api/v1/plat/query_equipment_list',
            data: {siteId:id},
            async : false,
            success: function(msg){
    //            var obj = eval( '(' + msg + ')' );//转换后的JSON对象
                var obj = msg;
                var det = obj.detail;
                var list = det.list;
                var num1=0;
                var totalNum;
    
                for(var i = 0; i < current_page_temp.length; i++){
                    if(id == current_page_temp[i].id){
                        num1 = current_page_temp[i].num1;
                        totalNum = current_page_temp[i].totalNum;
                        break;
                    }
                }
    
                setTimeout(function(){        //  显示当前站点的所有充电桩                             //   原本是进行封装,IE调试下,封装的有报错  参数无效。未解
                    $('.map-stations').show();
    //                                $('.scroll-area').width($('.map-stations').width() -52);
                    $('.scroll-cont').width(120*(list.length));
                    $('.scroll-cont').html('');
                    $('.scroll-cont').css({'left':'0px'});
                    var t_html = '';
                    for(var i = 0; i < list.length; i++){
                        t_html+= '<div class="scroll-item">';
                        t_html+=   '<div class="imgbox">';
                        if(list[i].imageUrl == undefined || list[i].imageUrl == ''){
                            t_html+=     '<img src="" width="60" height="68" />';
                        }else{
                            t_html+=     '<img src="'+system_param.url + list[i].imageUrl +'" width="60" height="68" />';
                        }
                        t_html+=   '</div>';
                        t_html+=   '<div class="num">编号:'+list[i].code+'</div>';
                        t_html+=   ' <div class="type">类型:'+list[i].pilesTypeValue+'</div>';
                        if(list[i].workStateValue != '空闲'){
                            t_html+= '<div class="stat-icon stat-busy">';
                            t_html+= '<span class="text">';
                            t_html+= ''+list[i].workStateValue;
                            t_html+= '<span class="p">P</span>';
                            t_html+= '</span>';
                            t_html+= '</div>';
                        }else{
                            t_html+= '<div class="stat-icon stat-idle">';
                            t_html+= '<span class="text">';
                            t_html+= ''+list[i].workStateValue;
                            t_html+= '<span class="p">P</span>';
                            t_html+= '</span>';
                            t_html+= '</div>';
                        }
                        t_html+= '</div>';
                    }
                    $('.scroll-cont').html(t_html);
                },0);
    
                var k_num = 0;
                for(var i = 0; i < list.length; i++){
                    if(list[i].workStateValue == '空闲'){
                        k_num++;
                    }
                }
    
                sContent= '<div class="map-infoview map-infoview1 fst">';
                sContent+= '<h4>';
                sContent+= ''+det.name;
                sContent+= '</h4>';
                sContent+= '<div class="iv-cont">';
                sContent+= '<div class="clearfix">';
                sContent+= '<div class="imgbox">';
                sContent+= '<img src="'+system_param.url+det.c_img+'" width="68" height="42" />';
                sContent+= '</div>';
                sContent+= '<div class="aside">';
                sContent+= '地址:'+det.address;
                sContent+= '</div>';
                sContent+= '</div>';
                sContent+= '<div class="func fyh">';
                sContent+= '<a href="#" class="l atc-btn-b mapbtn-a">查看平面图</a>';
                //  是否收费   reserveIsFree         收费的为 Y  reserveIsFree
                if(parseInt(k_num) == 0){
                    sContent+= '<a href="manage/cars_regcharge.html?d_id='+id+'" class="r atc-btn-a mapbtn-a">登记预约</a>';
                }else{
                    sContent+= '<a href="manage/cars_regcharge.html?d_id='+id+'" class="r atc-btn-a mapbtn-a">登记预约</a>';
                    sContent+= '<a href="manage/cars_charge.html?d_id='+id+'&isfree='+det.reserveIsFree+'" class="r atc-btn-a mapbtn-a">马上预约</a>';
                }
                sContent+= '</div>';
                sContent+= '</div>';
                sContent+= '<div class="status-line">';
                sContent+= '充电设备:';
                sContent+= '<span class="mr10">剩余<span class="red">'+num1+'</span>个</span>';
                sContent+= '总共<span class="red">'+list.length+'</span>个';
                sContent+= '</div>';
                sContent+= '</div>';
    
            }, error: function () {
                sContent = '站点正在开发中';
            }
        })
        var infoWindow = new BMap.InfoWindow(sContent,{enableMessage:false,274});  // 创建信息窗口对象
        marker.openInfoWindow(infoWindow);
    }
    
    /**
     * 加载已经开通站点的城市
     */
    var load_city_data = function(){
        $.ajax({
            type: 'get',
            url: system_param.url+'/api/v1/plat/query_site_city',
            dataType : 'text',
            async: false,
            success: function(msg){
                var obj = eval( '(' + msg + ')' );//转换后的JSON对象
                //
                var list = obj.list;
                exis_city_list = list;
                $('.already_city').html('');
                var _html = '';
                for(var i = 0; i < list.length; i++){
                    _html += '<a href="#" class="city-a">'+list[i].name+'</a>';
                }
                $('.already_city').html(_html);
            }
        });
    }
  • 相关阅读:
    整合SSH遇到的问题
    学习动态代理实现业务层的事务控制遇到的问题
    docker局域网独立IP外网访问配置
    第23次CSP-D题解法
    Nordic Bluetooth 切换到DFU Mode
    MySQL事务、锁和MVCC
    深拷贝和浅拷贝的区别是什么?
    python是如何进行内存管理的
    数据库的事务
    斐波那契数列
  • 原文地址:https://www.cnblogs.com/yudishow/p/4377812.html
Copyright © 2020-2023  润新知