javascript - 这里悬停信息气泡位置的 map

我希望我的infoBubble在mouseenter上打开，然后在mouseleave上关闭，到目前为止，它与infoBubble的默认位置完全不同，即默认位置在标记上，并且在标记上移动鼠标时，它会不断关闭和打开。

当它落在标记上时我的意思的一个示例可以在这里看到：
http://developer.here.com/api-explorer#maps-js/open-infobubble

理想情况下，我希望infoBubble显示在标记下方，是否可以设置infoBubble的位置？

（尝试使用setPosition方法将infoBubble向上移动，但标记与移出时的大小相同，因此infobubble返回顶部。

var infoBubble = new H.ui.InfoBubble({
            lat: coordinates[1],
            lng: coordinates[0]
        }, {
            content: infoBubbleContent
        });

        marker.addEventListener('pointerenter', function() {
            ui.addBubble(infoBubble);
            infoBubble.open();
        }, false);

        marker.addEventListener('pointerleave', function() {
            infoBubble.close();
        }, false);

提前谢谢你的帮助

最佳答案

与其修改Infobubble组件的行为，不如创建一个自定义的Tooltip组件。这样可以观察地图上的对象并显示样式化的注入<DIV>，这当然在您的控制之下。

可以定义一个工具提示，如下所示：

(function (ctx) {
  // ensure CSS is injected
  var tooltipStyleNode = ctx.createElement('style'),
    css = '#nm_tooltip{' +
      ' color:white;' +
      ' background:black;' +
      ' border: 1px solid grey;' +
      ' padding-left: 1em; ' +
      ' padding-right: 1em; ' +
      ' display: none;  ' +
      ' min-width: 120px;  ' +
      '}';

  tooltipStyleNode.type = 'text/css';
  if (tooltipStyleNode.styleSheet) { // IE
    tooltipStyleNode.styleSheet.cssText = css;
  } else {
    tooltipStyleNode.appendChild(ctx.createTextNode(css));
  }
  if (ctx.body) {
    ctx.body.appendChild(tooltipStyleNode);
  } else if (ctx.addEventListener) {
    ctx.addEventListener('DOMContentLoaded',  function () {
      ctx.body.appendChild(tooltipStyleNode);
    }, false);
  } else {
    ctx.attachEvent('DOMContentLoaded',  function () {
      ctx.body.appendChild(tooltipStyleNode);
    });
  }
})(document);


Object.defineProperty(Tooltip.prototype, 'visible', {
  get: function() {
    return this._visible;
  },
  set: function(visible) {
    this._visible = visible;
    this.tooltip.style.display = visible ? 'block' : 'none';
  }
});


function Tooltip(map) {
  var that = this;
  that.map = map;
  that.tooltip  = document.createElement('div');
  that.tooltip.id = 'nm_tooltip';
  that.tooltip.style.position = 'absolute';
  obj = null,
  showTooltip = function () {
    var point = that.map.geoToScreen(obj.getPosition()),
      left = point.x - (that.tooltip.offsetWidth / 2),
      top = point.y + 1; // Slight offset to avoid flicker.
    that.tooltip.style.left = left + 'px';
    that.tooltip.style.top = top + 'px';
    that.visible = true;
    that.tooltip.innerHTML =  obj.title;
  };


  map.getElement().appendChild(that.tooltip);
  map.addEventListener('pointermove', function (evt) {
    obj = that.map.getObjectAt(evt.currentPointer.viewportX,
        evt.currentPointer.viewportY);
    if(obj && obj.title){
      showTooltip();
    } else {
      that.visible = false;
    }
  });

  map.addEventListener('tap', function (evt){
    that.tooltip.visible  = false;
  });
  map.addEventListener('drag', function (evt){
    if (that.visible) {
      showTooltip();
    }
  });
};

通过传入当前map来初始化组件：

tooltip = new Tooltip(map);

并在具有title属性的任何对象（字符串或HTML标记）上显示，当然，如果需要，可以将其更新为使用getData()方法：

   // Simple Marker with tooltip
  var brandenburgerTorMarker = new H.map.Marker(
    {lat:52.516237, lng: 13.35}),
    fernsehturmMarker = new H.map.Marker(
      {lat:52.520816, lng:13.409417});

  brandenburgerTorMarker.title = 'Brandenburger Tor';

  // Marker with HTML Tooltip
  fernsehturmMarker.title ='<div>' +
    '<h2>Tooltip with HTML content<\/h2>' +
    '<img width=\'120\' height=90 src=' +
    '\'http://upload.wikimedia.org/wikipedia/commons/' +
    '8/84/Berlin-fernsehturm.JPG\' ' +
    'alt=\'\'/><br/><b>Fernsehturm, Berlin<\/b>' +
    '<\/div>';

  // Add the markers onto the map
  map.addObjects([brandenburgerTorMarker, fernsehturmMarker]);

悬停文本如下所示-通过根据需要更改CSS样式：

关于javascript - 这里悬停信息气泡位置的 map ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30006091/