Question

我正在使用ammap库创建一个网页来显示世界地图。当用户点击某个国家/地区时，我需要弹出一个工具提示，以便显示一些用户可以与该特定国家/地区进行互动的链接等。 Ammap给了我一个“onclick”事件，我可以在其中获取我需要在工具提示中输入的所有信息 - 但我无法弄清楚如何做我想要的。

我查看了工具提示库，但似乎需要将工具提示附加到页面上的一个元素，这是我无法做到的，因为地图是由ammap库创建的。

最好的方法是什么？

由于

编辑：

我点击地图区域时实施的事件是：

map.addListener("clickMapObject", function (event) {
});

Answer 1

对于工具提示，我喜欢使用display:none; html元素，对于对象的onclick事件，只需抓取元素的偏移量，设置工具提示{{1}并在被点击的对象附近调整其偏移量。

display:block;

在css中（如果需要，更改z-index）：

<div id='tooltip'>tooltip</div>

这一切都取决于浏览器/客户端。以下是javascript函数的示例：

display:none;

对于此示例，您还需要onmouseout事件来将工具提示的显示设置为无。

我不认为这是最有效的例子，但确实有效。

Answer 2

我构建了一个小例子，您可以看到如何处理元素点击事件的工具提示。我对提到的库不是很熟悉，但由于逻辑类似，所以在给定方法中复制粘贴下面片段的内部部分

map.addListener("clickMapObject", function (event) {
    // place the snippet below in here ...          
});`

并尝试一下。

的JavaScript。

document.addEventListener('click', function(e) {

    e = e || window.event;
    var target = e.target || e.srcElement;

    if (target.className == 'killer') return false;

    var div = document.createElement('DIV');
    div.className = 'tooltip';
    div.innerHTML = 'This is a content within tooltip.';
    var span = document.createElement('SPAN');
    span.className = 'killer';
    span.innerHTML = 'X';
    span.onclick = function(){
        document.body.removeChild(this.parentNode);
    };
    div.appendChild(span);
    document.body.appendChild(div);
    div.style.left = e.clientX + document.body.scrollLeft + 'px';
    div.style.top = e.clientY + document.body.scrollTop + 'px'; 

}, false);

CSS

.tooltip {
  background-color:#555;
  width:200px;height:50px;
  z-index:99999;
  position:absolute;
}  

.killer {
  background-color:#fff;
  color:#555;
  cursor:pointer;
}

这是一个有效的jsBin，所以你可以玩：）

Javascript工具提示没有附加到html元素

2 个答案: