// 常见问题$(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', width: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 = ' '; $('#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+= '
'; _html+= '
'; _html+= ' 地址:'+list[i].address+'
'; _html+= ' '; _html+= '充电设备: 剩余 '+list[i].deviceSurplusNum+' 个总共 '+list[i].deviceTotalNum+' 个'; _html+= '
'; _html+= ' '; t_html+= '
'; } $('.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= ' '; if(list[i].imageUrl == undefined || list[i].imageUrl == ''){ t_html+= ' '; }else{ t_html+= ' '; } t_html+= '
'; t_html+= ' 编号:'+list[i].code+'
'; t_html+= ' 类型:'+list[i].pilesTypeValue+'
'; if(list[i].workStateValue != '空闲'){ t_html+= ' '; }else{ t_html+= ' '; } t_html+= ' '; sContent+= '
'; }, error: function () { sContent = '站点正在开发中'; } }) var infoWindow = new BMap.InfoWindow(sContent,{enableMessage:false,width: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 += ''+list[i].name+''; } $('.already_city').html(_html); } });} '; sContent+= ''+det.name; sContent+= '
'; sContent+= ' '; sContent+= '
'; sContent+= ' '; sContent+= '
'; sContent+= ' '; sContent+= ' '; sContent+= ' '; sContent+= '
'; sContent+= ' '; sContent+= '地址:'+det.address; sContent+= '
'; sContent+= ' '; sContent+= '充电设备:'; sContent+= ' 剩余'+num1+'个'; sContent+= '总共 '+list.length+'个'; sContent+= '
'; sContent+= '
posted on 2015-03-30 13:32 阅读( ...) 评论( ...)