参考 Agger_chen 上学下达 两位,但有如下问题:
1.style要用class方式,使用原博主方式会出现tip出现在地图的上面或者下面(根据div先后顺序决定),而不是悬浮于地图之上。
2.原博中tip位置的实现,若tip超出右边界或者下边界并不能完整显示,请参考以下代码:
position: function(point, params, dom, rect, size) {
var width = $(dom).width(); //获取tooltip原来的width
var m = $("#mapStoreClass"); //获取我们自定义模拟的tooltip dom
$(dom).css("position","initial"); //将原来的tooltip设置为initial *重要,为了不让原来的tooltip dom乱跑
$(m).html(dom); //将更改好的dom放入我们模拟的tooltip dom
//其中point为当前鼠标的位置,size中有两个属性:viewSize和contentSize,分别为外层div和tooltip提示框的大小
var x = point[0];//
var y = point[1];
var viewWidth = size.viewSize[0];
var viewHeight = size.viewSize[1];
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
var posX = 0;//x坐标位置
var posY = 0;//y坐标位置
if (viewWidth-x < boxWidth) { // 右边放不下,放到鼠标左边
$(m).css("left",x-boxWidth-10);
} else {
$(m).css("left",point[0]+20);
}
if (viewHeight-y < boxHeight) { // 下边放不下,放到鼠标上边
$(m).css("top",y-boxHeight-10);
} else {
$(m).css("top",point[1]+20);
}
//$(m).css("left",point[0]+20); //设置模拟dom显示位置,此为鼠标位置
//$(m).css("top",point[1]+20); //设置模拟dom显示位置,此为鼠标位置
$(m).css("width",width+15); //设置模拟dom宽度
//不用return 在此我们只是用来获取我们想要的point和dom,并不更改原来的位置,因为改了也没用,不然我就不用这么麻烦了。。
}