在项目中,全国地图上显示各个省的销量情况;鼠标悬浮到具体某个省上时,显示各个供应商的销量情况列表。
但是悬浮层空间有限,只能显示名称和销量,供应商的具体信息不可能完全显示,那我们可以在名称上加链接,点击之后弹出一个页面用于显示供应商的详细信息。
那么问题来了,当鼠标悬浮在悬浮层某个a标签的时候,地图上的某个省份进入到选中状态。当鼠标点下时,不仅触发了a标签里的JavaScript代码,也触发了地图某省份的click时间对应的JavaScript代码。当省份需要钻取到地市一级的时候,就会出现刚刚打开供应商详情页,紧接着跳转到选中省份的地市一级的页面。
当悬浮层在陕西省时,鼠标落在悬浮层时,悬浮层下的陕西省处于选中状态。于是我想到了第一种解决方案,增加悬浮层的zindex,使悬浮层的div置于地图的canvas之上。但是发现之是有小幅度改善,当鼠标位于悬浮层上时,距离悬浮层很远的某个省份处于选中状态,用zindex是控制不了的。
既然不治本,那就治标吧,把混乱现象阻止住即可。混乱在哪呢?点击悬浮层时,不仅悬浮层的事件响应,地图的点击事件也响应。于是我想到了下面这种解决方案:
点击悬浮层时,悬浮层的JavaScript正常运行。当点击地图时,我们判断鼠标是否落在悬浮层内,如果落在悬浮层则停止地图点击触发的事件对应的操作;如果不在悬浮层上,则继续。
1.当点击地图时,因为悬浮层没有被点击,只执行地图点击事件对应的函数。
2.当点击悬浮层时,因为地图没有被点击,只执行悬浮层点击事件对应的函数。
3.当二者都没点击时,不执行任何函数。
4.当点击悬浮层误触地图时,悬浮层点击事件响应,执行对应的函数;地图点击事件也响应,执行函数,但是在函数的前半段,检查到鼠标位于悬浮层内,函数执行停止,不会进入后半段,地图点击事件虽然响应但是没有可视化的反应,在用户来看就像没有反应。
具体判断代码如下:
悬浮层class置为mywindow;
地图点击事件按照下面的方法写:
myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
var event = param.event;
var x=event.pageX,y=event.pageY;
var left = $(".mywindow").offset().left;
var right = $(".mywindow").offset().left+$(".mywindow").width();
var top = $(".mywindow").offset().top;
var bottom = $(".mywindow").offset().top+$(".mywindow").height();
if(x>=left && x<=right && y>=top && y<=bottom){
return;
}
//下面写地图被点击相应的逻辑
});
但是悬浮层空间有限,只能显示名称和销量,供应商的具体信息不可能完全显示,那我们可以在名称上加链接,点击之后弹出一个页面用于显示供应商的详细信息。
那么问题来了,当鼠标悬浮在悬浮层某个a标签的时候,地图上的某个省份进入到选中状态。当鼠标点下时,不仅触发了a标签里的JavaScript代码,也触发了地图某省份的click时间对应的JavaScript代码。当省份需要钻取到地市一级的时候,就会出现刚刚打开供应商详情页,紧接着跳转到选中省份的地市一级的页面。
当悬浮层在陕西省时,鼠标落在悬浮层时,悬浮层下的陕西省处于选中状态。于是我想到了第一种解决方案,增加悬浮层的zindex,使悬浮层的div置于地图的canvas之上。但是发现之是有小幅度改善,当鼠标位于悬浮层上时,距离悬浮层很远的某个省份处于选中状态,用zindex是控制不了的。
既然不治本,那就治标吧,把混乱现象阻止住即可。混乱在哪呢?点击悬浮层时,不仅悬浮层的事件响应,地图的点击事件也响应。于是我想到了下面这种解决方案:
点击悬浮层时,悬浮层的JavaScript正常运行。当点击地图时,我们判断鼠标是否落在悬浮层内,如果落在悬浮层则停止地图点击触发的事件对应的操作;如果不在悬浮层上,则继续。
1.当点击地图时,因为悬浮层没有被点击,只执行地图点击事件对应的函数。
2.当点击悬浮层时,因为地图没有被点击,只执行悬浮层点击事件对应的函数。
3.当二者都没点击时,不执行任何函数。
4.当点击悬浮层误触地图时,悬浮层点击事件响应,执行对应的函数;地图点击事件也响应,执行函数,但是在函数的前半段,检查到鼠标位于悬浮层内,函数执行停止,不会进入后半段,地图点击事件虽然响应但是没有可视化的反应,在用户来看就像没有反应。
具体判断代码如下:
悬浮层class置为mywindow;
地图点击事件按照下面的方法写:
myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
var event = param.event;
var x=event.pageX,y=event.pageY;
var left = $(".mywindow").offset().left;
var right = $(".mywindow").offset().left+$(".mywindow").width();
var top = $(".mywindow").offset().top;
var bottom = $(".mywindow").offset().top+$(".mywindow").height();
if(x>=left && x<=right && y>=top && y<=bottom){
return;
}
//下面写地图被点击相应的逻辑
});