|
|
|
/**
|
|
|
|
* @fileOverview 地图列表
|
|
|
|
* @author feiker <fei.hong@yoho.cn>
|
|
|
|
* @date 2013-06-04
|
|
|
|
*/
|
|
|
|
|
|
|
|
var $ = require('jquery');
|
|
|
|
require('yoho.easing');
|
|
|
|
require('jquery.imagesloaded');
|
|
|
|
require('jquery.pin');
|
|
|
|
require('jquery-ui');
|
|
|
|
require('jquery.ui.touch-punch');
|
|
|
|
require('jquery.wresize');
|
|
|
|
$("#map-pannel").css({"background":"#fff",height:"300px"}).pin({containerSelector: ".wrapper"});
|
|
|
|
|
|
|
|
$(".hot-area").mouseover(function(){
|
|
|
|
$(this).find(".background").show();
|
|
|
|
$(this).find(".china-area").show();
|
|
|
|
});
|
|
|
|
$(window).scroll(function()
|
|
|
|
{
|
|
|
|
var height = $(".page-head").height();
|
|
|
|
$("#map-pannel").css({"top":height+"px"});
|
|
|
|
});
|
|
|
|
var mapW = $(".grid-city-map").width();
|
|
|
|
|
|
|
|
$(".background").on("click",function(){
|
|
|
|
$(this).hide();
|
|
|
|
$(".china-area").hide();
|
|
|
|
});
|
|
|
|
if($(".grid-city-map #map").length)
|
|
|
|
{
|
|
|
|
//页面图加载完成
|
|
|
|
$(".grid-city-map #map").imagesLoaded(function()
|
|
|
|
{
|
|
|
|
$(".handle").show().mousedown(function()
|
|
|
|
{
|
|
|
|
$(this).addClass('grabbing');
|
|
|
|
}).mouseup(function()
|
|
|
|
{
|
|
|
|
$(this).removeClass('grabbing');;
|
|
|
|
});
|
|
|
|
//hover到店铺列表后的地图移动和tip展示
|
|
|
|
|
|
|
|
var timeoutHandle= null;
|
|
|
|
$(".map-shop-list .shop-name").hover(function()
|
|
|
|
{
|
|
|
|
var self = $(this);
|
|
|
|
window.clearTimeout(timeoutHandle);
|
|
|
|
timeoutHandle = window.setTimeout(function()
|
|
|
|
{
|
|
|
|
showTip(self.attr("val"),this);
|
|
|
|
$("#"+self.attr("val")).css({"z-index":1000});
|
|
|
|
},650);
|
|
|
|
|
|
|
|
},function()
|
|
|
|
{
|
|
|
|
$(".mark-tip").fadeOut('fast');
|
|
|
|
$("#"+$(this).attr("val")).css({"z-index":3});
|
|
|
|
});
|
|
|
|
|
|
|
|
//鼠标移到建筑物展示tip
|
|
|
|
var setime = null;
|
|
|
|
var tip_clone = null;
|
|
|
|
$(".grid-city-map .mark").hover(function()
|
|
|
|
{
|
|
|
|
// window.clearTimeout(setime);
|
|
|
|
var id = $(this).attr("val");
|
|
|
|
$(this).find(".mark-tip").show();
|
|
|
|
var pos = $("#"+id).position();
|
|
|
|
var tipPos = pos.left>$(".grid-city-map").width()/2?"left":"right";
|
|
|
|
$("#"+id).find(".mark-tip").attr("class","mark-tip "+tipPos);
|
|
|
|
$("#"+id).css({"z-index":1000});
|
|
|
|
var distance = $("#"+id).find(".mark-tip").offset();
|
|
|
|
tip_clone = $("#"+id).find(".mark-tip").hide().clone();
|
|
|
|
//$(this).parent().append(tip_clone);
|
|
|
|
$("body").append(tip_clone);
|
|
|
|
var top=parseInt($("#"+id).css("top").replace("px",""))-parseInt(tip_clone.css("height").replace("px",""));
|
|
|
|
|
|
|
|
var left=parseInt($("#"+id).css("left").replace("px",""))-parseInt(tip_clone.css("width").replace("px",""));
|
|
|
|
tip_clone.attr("id", id+"_clone").css({"position": "fixed",
|
|
|
|
"top": distance.top+"px",
|
|
|
|
"left": distance.left+"px",
|
|
|
|
"z-index": 1000000}).show();
|
|
|
|
|
|
|
|
// 鼠标移动到克隆的mark-tip触发的事件
|
|
|
|
$("#"+id+"_clone").hover(function(){
|
|
|
|
window.clearTimeout(setime); //鼠标划过的时候清除延迟（即清除setime这个函数）；
|
|
|
|
}, function(){
|
|
|
|
$(this).fadeOut("fast");
|
|
|
|
$(this).remove();
|
|
|
|
});
|
|
|
|
},function()
|
|
|
|
{
|
|
|
|
var self = $(this);
|
|
|
|
setime = setTimeout(function(){
|
|
|
|
var clone = $("#"+self.attr("val")+"_clone");
|
|
|
|
|
|
|
|
clone.fadeOut("fast");
|
|
|
|
clone.remove();
|
|
|
|
}, 50);
|
|
|
|
$("#"+$(this).attr("val")).css({"z-index":3});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
//打开该店铺
|
|
|
|
$(".grid-city-map .mark img").click(function()
|
|
|
|
{
|
|
|
|
var id = $(this).parent('.mark').attr("id");
|
|
|
|
var href = $(".map-shop-list a[val='"+id+"']").attr("href");
|
|
|
|
//window.location.href = href;
|
|
|
|
window.open(href);
|
|
|
|
});
|
|
|
|
|
|
|
|
initMap();
|
|
|
|
$(".handle").draggable({ axis: "y",containment:"parent"});
|
|
|
|
});
|
|
|
|
|
|
|
|
function initMap()
|
|
|
|
{
|
|
|
|
//设置地图面板的高宽
|
|
|
|
var mapH = $("#map")[0].clientHeight;
|
|
|
|
var mapW = $("#map")[0].clientWidth;
|
|
|
|
$(".grid-city-map").height(mapH);
|
|
|
|
$("#map-pannel").width(mapW);
|
|
|
|
|
|
|
|
//初始化坐标位置
|
|
|
|
$(".grid-city-map .mark").each(function()
|
|
|
|
{
|
|
|
|
var w = $(this).attr('left')/10000;
|
|
|
|
var h = $(this).attr('top')/10000;
|
|
|
|
$(this).css({left:(mapW*w)+"px",top:(mapH*h)+"px"});
|
|
|
|
});
|
|
|
|
|
|
|
|
//设置拖拽
|
|
|
|
var ch = $(".map-hide").height();
|
|
|
|
$("#drag-pannel").width(mapW).height(mapH*2-ch+161).css({"position":"absolute","top":(ch-mapH)+"px"});
|
|
|
|
$(".handle").css({"top":(mapH-ch)+"px"});
|
|
|
|
}
|
|
|
|
|
|
|
|
$(window).resize(initMap);
|
|
|
|
|
|
|
|
//展示tip和移动
|
|
|
|
function showTip(id,obj)
|
|
|
|
{
|
|
|
|
$(".mark-tip").hide();
|
|
|
|
var pos = $("#"+id).position();
|
|
|
|
var height = $("#"+id).height();
|
|
|
|
var tipHeight = 161;
|
|
|
|
var cur = (420-(height+161))/2+tipHeight;
|
|
|
|
var num = cur-pos.top;
|
|
|
|
var tipPos = pos.left>$(".grid-city-map").width()/2?"left":"right";
|
|
|
|
$("#"+id).find(".mark-tip").attr("class","mark-tip "+tipPos);
|
|
|
|
var ch = $(".map-hide").height();
|
|
|
|
var mapH = $("#map").height();
|
|
|
|
num=num+(mapH-ch);
|
|
|
|
if(num==0)
|
|
|
|
{
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
//设置移动和动画
|
|
|
|
$(".grid-city-map").stop( true, true ).animate({"top":num+"px"},200,"easeOutExpo",function()
|
|
|
|
{
|
|
|
|
$("#"+id).stop( true, true ).animate({"top":"-=40px"},100,"easeOutQuart")
|
|
|
|
.animate({"top":"+=40px"},300,"easeOutBounce",function()
|
|
|
|
{
|
|
|
|
$(".mark-tip").hide();
|
|
|
|
$(this).find(".mark-tip").show();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
$(".parent-nav li").css({"cursor":"pointer"});
|
|
|
|
$(".parent-nav li").click(function()
|
|
|
|
{
|
|
|
|
window.location.href = $(this).find("a").attr("href");
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
//导航切换分页
|
|
|
|
var offset = 0;
|
|
|
|
var limit = 9;
|
|
|
|
function navMove(num)
|
|
|
|
{
|
|
|
|
if((offset==0&&num<0)||(num>0&&offset+limit>=$(".sub-nav:eq(1) li").length))
|
|
|
|
{
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
offset+=num;
|
|
|
|
$(".sub-nav:eq(1) li").hide();
|
|
|
|
$(".sub-nav:eq(1) li").each(function()
|
|
|
|
{
|
|
|
|
var index = $(".sub-nav:eq(1) li").index(this);
|
|
|
|
if(index>=offset&&index<(offset+limit))
|
|
|
|
{
|
|
|
|
$(this).show();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
if((num>0&&offset+limit>=$(".sub-nav:eq(1) li").length))
|
|
|
|
{
|
|
|
|
$(".sub-nav:eq(2) span").removeClass("click");
|
|
|
|
}
|
|
|
|
else
|
|
|
|
{
|
|
|
|
$(".sub-nav:eq(2) span").addClass("click");
|
|
|
|
}
|
|
|
|
if((offset==0&&num<0))
|
|
|
|
{
|
|
|
|
$(".sub-nav:eq(0) span").removeClass("click");
|
|
|
|
}
|
|
|
|
else
|
|
|
|
{
|
|
|
|
$(".sub-nav:eq(0) span").addClass("click");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
$(".sub-nav:eq(0) span").click(function()
|
|
|
|
{
|
|
|
|
navMove(-limit);
|
|
|
|
});
|
|
|
|
$(".sub-nav:eq(2) span").click(function()
|
|
|
|
{
|
|
|
|
navMove(limit);
|
|
|
|
});
|
|
|
|
|
|
|
|
//首页的行为
|
|
|
|
$(".big-mark").hover(function()
|
|
|
|
{
|
|
|
|
$(this).css({'z-index':1000});
|
|
|
|
if(Number(this.style.left.replace("%",""))<50)
|
|
|
|
{
|
|
|
|
$(this).find(".mark-tip").attr("class","mark-tip rights");
|
|
|
|
}
|
|
|
|
$(this).find(".mark-tip").fadeIn('fast');
|
|
|
|
},function()
|
|
|
|
{
|
|
|
|
$(this).find(".mark-tip").fadeOut('fast');
|
|
|
|
$(this).css({'z-index':2});
|
|
|
|
});
|
|
|
|
$(".big-mark").click(function()
|
|
|
|
{
|
|
|
|
window.location.href = $(this).attr("url");
|
|
|
|
});
|
|
|
|
function setDrag()
|
|
|
|
{
|
|
|
|
//$(".wrapper").css({"width":"100%"});
|
|
|
|
var w = $(".gird-map-pan").width();
|
|
|
|
var maxW = $("#drag_handle").width();
|
|
|
|
var left = $(".gird-map-pan").offset().left;
|
|
|
|
//$("#drag_handle").draggable({ axis: "x",containment:[(w-maxW+left),0,left,0]});
|
|
|
|
//$("#drag_handle").css({"left":((w-maxW)/2)+"px"});
|
|
|
|
if(w<1320)
|
|
|
|
{
|
|
|
|
$("#drag_handle").width(980).height(486);
|
|
|
|
$("#Map-area area").attr("coords","684,203,640,236,669,264,711,285,730,296,755,286,767,289,769,277,773,237,782,234,792,226,799,216,801,203,797,191,767,191,755,210,747,218,717,226");
|
|
|
|
}
|
|
|
|
else
|
|
|
|
{
|
|
|
|
$("#drag_handle").width(1320).height(654);
|
|
|
|
$("#Map-area area").attr("coords","900,271,863,313,886,345,927,359,946,379,971,370,986,385,1024,362,1033,339,1027,321,1039,305,1056,292,1045,264,1025,258,1005,278,983,294,968,299,934,295");
|
|
|
|
}
|
|
|
|
$(".footer").css({"margin-top":"20px"});
|
|
|
|
}
|
|
|
|
if($("#drag_handle").length>0)
|
|
|
|
{
|
|
|
|
$(window).resize(setDrag);
|
|
|
|
setDrag();
|
|
|
|
}
|
|
|
|
var flag = null;
|
|
|
|
$("#Map-area area").hover(function()
|
|
|
|
{
|
|
|
|
$("#china-map").show();
|
|
|
|
$("#drag_handle").css({'opacity':'0.4'});
|
|
|
|
},function()
|
|
|
|
{
|
|
|
|
flag = window.setTimeout(function()
|
|
|
|
{
|
|
|
|
$("#china-map").hide();
|
|
|
|
$("#drag_handle").css({'opacity':'1'});
|
|
|
|
},0);
|
|
|
|
});
|
|
|
|
$("#china-map").hover(function()
|
|
|
|
{
|
|
|
|
window.clearTimeout(flag);
|
|
|
|
$("#china-map").show();
|
|
|
|
$("#drag_handle").css({'opacity':'0.4'});
|
|
|
|
},function()
|
|
|
|
{
|
|
|
|
$("#china-map").hide();
|
|
|
|
$("#drag_handle").css({'opacity':'1'});
|
|
|
|
}); |
