在 HERE 地图中将鼠标悬停在标记上时显示内容 Div

Question

我是这里地图的新手，需要在标记悬停时显示 div。我已经能够放置带有图标的标记，但现在需要显示带有一些额外信息的 div。 HERE 地图 API 是否提供此功能？任何文档 URL 或一段代码将不胜感激。注意：我正在使用 HERE 地图 JS API 用于网络。

Answer 1

您没有 "hover" 标记侦听器，但您可以在点击时显示 infoBubble

http://heremaps.github.io/examples/explorer.html#infobubble-on-marker-click

如果这对您不起作用，您将不得不使用 jquery 并在 HTML 标记元素上绑定 "hover"。（这不是一件容易的事）

Answer 2

您可以通过向地图添加各种事件侦听器来创建工具提示效果，以检查鼠标指针是否位于某个对象上。

(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 对象来初始化的，如下所示：

function addTooltipControlToMap(map) {
  tooltip = new Tooltip(map);
}

编写的代码正在寻找要添加到地图对象的 .title 属性 - 如果愿意，可以将其更新为使用 .getData()。工具提示可以如下所示初始化，采用文本或 html:

function addMarkersWithTooltips(map) {

    // 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]);
}

Answer 3

我已经能够为 HERE 地图的标记找到合适的鼠标悬停事件，这些标记是 pointerenter 和 pointerleave 以及使用这些标记的示例代码事件是：

// After Initializing map with your own credentials.
var map = new H.Map(document.getElementById('map'),
      defaultLayers.normal.map,{
      center: {lat: LAT_VAL, lng: LNG_VAL},
      zoom: 12
    });

var domMarker = new H.map.DomMarker(coords, {
            icon: domIcon
          });
var bubble;
domMarker.addEventListener('pointerenter', function(evt) {
              bubble = new H.ui.InfoBubble({lat:"SOME_VALUE",lng:"SOME_VALUE"}, {
              content: "Your content come here"
            });
            ui.addBubble(bubble);
          }, false);
          domMarker.addEventListener('pointerleave', function(evt) {
            bubble.close();
          }, false);
map.addObject(domMarker);

Answer 4

根据您使用的 api 版本，您可能会在文档 pdf 中找到您正在寻找的内容（或者至少从那里开始）。假设您需要制作一些 HTML 样式的标记 ，您可能需要：

DomMarker（而不是标记，因为它允许您使用 ->2）
DomIcon（可以嵌入html）可以在此处找到示例 https://developer.here.com/apiexplorer-v2-sample-data/template-web-default/examples/map-with-dom-marker/index.html

无论如何，如果您需要显示有关标记的信息，我建议使用为此目的开发的 InfoBubbles。来自 3.0.5 文档：

// Create an info bubble object at a specific geographic location:
ui = H.ui.UI.createDefault(self.map, defaultLayers);
var bubble = new H.ui.InfoBubble({ lng: 13.4, lat: 52.51 }, {
 content: '<b>Hello World!</b>'
 });

// Add info bubble to the UI:
ui.addBubble(bubble);

要显示它们，您应该将事件附加到标记点击事件：

marker.addEventListener('tap', function (evt) {

    //create and add the bubble

}

无论如何，您可以在此处找到您的 api 版本的文档：https://developer.here.com/documentation/versions

在 HERE 地图中将鼠标悬停在标记上时显示内容 Div

Showing a content Div on hover of a marker in HERE Maps

javascript

maps

here-api