// 常见问题
$(document).ready(function(){
// 添加页面头部与尾部
atc_header({index:3});
// 加载数据
load_datas();
})
var current_site = [];
var all_site = [];
var all_maker = [];
var map;
var load_datas = function(){
// 当前所在地名称
var current_prov = '';
var current_city = '';
var current_area = '';
var current_status = '';
// 百度地图API功能
map = new BMap.Map("mapBox"); // 创建Map实例
//map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom('北京', 12);
// map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
// map.setCurrentCity("深圳"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
// map.addEventListener("click", function(e){
// $('.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'});
// }
// })
// })
map.addEventListener("moveend", function(e){ // 鼠标移动,动态获取当前 城市位置
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);
load_site(1,current_prov,current_city,current_area,current_status,addMarker);
});
// $('.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'});
// }
// })
});
// 搜索框功能 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();
setTimeout(function(){
// 根据PP 获取当前省市区
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);
load_site(1,current_prov,current_city,current_area,current_status,addMarker);
});
// // 设置当前城市
// $('.view-text .text').html(current_city.replace('市',''));
// $('.current-city').html(current_city);
// load_site(1,current_prov,current_city,current_area,current_status,addMarker);
},500);
});
/**
* 搜索目的地
*/
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,current_status,addMarker);
}
}
});
$('.search-btn').click(function(){
if($('.search-txt').val() != ''){
myValue = $('.search-txt').val();
setPlace();
load_site(1,current_prov,current_city,current_area,current_status,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;
// 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,site_stauts,addMarker){
var count_ = 0;
count_ = count_d(); // 分页的需要先查询所有数据条数再进行分页
load_site_page(page,current_prov,current_city,current_area,site_stauts,addMarker);
load_a_page(count_,page,current_prov,current_city,current_area,site_stauts,addMarker);
}
/**
* 加载数据总条数
* @returns {number}
*/
var count_d = function(){
var count_ = 0;
// 加载总共多少条数据
$.ajax({
type: 'post',
url: 'vmdata/list/list.json',
// data: dataPara,
dataType:'text',
async: false,
success: function(msg){
var obj = eval( '(' + msg + ')' );//转换后的JSON对象
count_ = 120;
}
});
return count_;
}
var load_site_page = function(page,current_prov,current_city,current_area,site_stauts,addMarker){
var dataPara = {
p : page,
s : '10',
current_prov : current_prov,
current_city : current_city,
current_area : current_area,
site_stauts : site_stauts
};
$.ajax({
type: 'post',
url: 'vmdata/map/site_list.json',
async: false,
dataType:'text',
data: dataPara,
success: function(msg){
var obj = eval( '(' + msg + ')' );//转换后的JSON对象
var list = obj.list;
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"><</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">></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 = [];
for(var i = 0; i < list.length; i++){
var point = new BMap.Point(list[i].lng,list[i].lat);
addMarker(point,list[i].status,list[i].id,i); // 加载地图上的标注
// 加载左侧的站点信息
_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"> </a> '+list[i].site_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"> </a> '+list[i].site_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].sur_device+'</span> 个</span>总共 <span class="red">'+list[i].all_device+'</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);
}
}
});
}, error: function (e) {
console.log(e);
// alert('fail');
}
})
scroll_d('site_all_info');
}
/**
* 进行分页
* @param count 总数据条数
* @param curr_p 当前页
*/
var load_a_page = function(count, curr_p,current_prov,current_city,current_area,site_stauts,addMarker){ // 加载总共多少页 第二个参数为:当前跳转的页 // 控制默认样式
if(count > 10){
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"><</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">></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(),current_prov,current_city,current_area,site_stauts,addMarker);
load_a_page(count_d(),$(this).html(),current_prov,current_city,current_area,site_stauts,addMarker);
});
}
}
var click_show_window = function(marker, id){
var p = marker.getPosition(); //获取marker的位置
// alert('id='+id+' marker的位置是' + p.lng + ',' + p.lat);
// 点击标注 显示当前标注上的站点基本信息 查询所有的充电电桩
var sContent = '站点正在开发中';
$.ajax({
type: 'get',
url: 'vmdata/map/map_info.json',
data: {id:id},
async : false,
success: function(msg){
var obj = eval( '(' + msg + ')' );//转换后的JSON对象
var list = obj.list;
var det = obj.detail;
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">';
t_html+= '<img src="about:blank" width="60" height="68" />';
t_html+= '</div>';
t_html+= '<div class="num">编号:'+list[i].code+'</div>';
t_html+= ' <div class="type">类型:'+list[i].type+'</div>';
if(list[i].status != '空闲'){
t_html+= '<div class="stat-icon stat-busy">';
t_html+= '<span class="text">';
t_html+= ''+list[i].status;
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].status;
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].status == '空闲'){
k_num++;
}
}
sContent= '<div class="map-infoview map-infoview1 fst">';
sContent+= '<h4>';
sContent+= ''+det.title;
sContent+= '</h4>';
sContent+= '<div class="iv-cont">';
sContent+= '<div class="clearfix">';
sContent+= '<div class="imgbox">';
sContent+= '<img src="'+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>';
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+'" 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">'+k_num+'</span>个</span>';
sContent+= '总共<span class="red">'+list.length+'</span>个';
sContent+= '</div>';
sContent+= '</div>';
}, error: function () {
sContent = '站点正在开发中';
}
})
var infoWindow = new BMap.InfoWindow(sContent,{enableMessage:false,width:274}); // 创建信息窗口对象
marker.openInfoWindow(infoWindow);
}