Javascript 如何使用e.PageX和e.PageY值将信息窗口定位在管脚上方？

我正在用自定义信息窗口构建地图，我正在尝试根据点击的事件pageX和pin的PageY值定位信息窗口，但我不确定如何正确实现这一点，目前我所有的计算尝试都是通过随机位置进行的

JS

Microsoft.Maps.Events.addHandler(pin, 'click', function(e) {
     instance.displayInfoBox(e, pin, response);
});

$itemOverlay.css({

    top: e.pageX,
    left: e.pageY

}).show();

.item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: auto;
    background: white;
    padding: 10px;
    display: none;
}

CSS

Microsoft.Maps.Events.addHandler(pin, 'click', function(e) {
     instance.displayInfoBox(e, pin, response);
});

$itemOverlay.css({

    top: e.pageX,
    left: e.pageY

}).show();

.item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: auto;
    background: white;
    padding: 10px;
    display: none;
}

---

JSFiddle：

您混合了坐标，样式应为：

$itemOverlay.css({

  top:  e.pageY,
  left: e.pageX
}).show();