Я новичок в картах, и мне нужно показать div при наведении маркера. Я смог поставить маркеры со значками, но теперь мне нужно показать div с дополнительной информацией. Предоставляет ли HERE maps API такую функциональность? Любой URL-адрес документа или фрагмент кода будут оценены. ПРИМЕЧАНИЕ. Я использую HERE maps JS API для Интернета.
Отображение Div контента при наведении маркера в HERE Maps
Ответы (4)
Вы можете создать эффект всплывающей подсказки, добавив на карту различные прослушиватели событий, чтобы проверить, находится ли указатель мыши над объектом.
(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]);
}
Мне удалось найти правильные события мыши над событиями для маркеров карты 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);
mouseover
и mouseout
, тоже хороши.
- person Edoardoo; 19.08.2015
В зависимости от используемой вами версии 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);
Чтобы их показать, к событию маркера tap нужно прикрепить событие:
marker.addEventListener('tap', function (evt) {
//create and add the bubble
}
В любом случае вы можете найти документацию по вашей версии API здесь: https://developer.here.com/documentation/versions
У вас нет прослушивателя "наведения" для маркера, но вы можете показывать информационный пузырь при нажатии
http://heremaps.github.io/examples/explorer.html#infobubble-on-marker-click
Если это не работает для вас, вам придется использовать jquery и привязать «наведение» на элемент маркера HTML. (Это не очень простая задача)