Нов съм в картите тук и трябва да покажа 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
Нямате слушател на курсора за маркер, но можете да показвате infoBubble при щракване
http://heremaps.github.io/examples/explorer.html#infobubble-on-marker-click
Ако това не работи за вас, ще трябва да използвате jquery и да обвържете "hover" върху HTML маркер елемент. (Това не е много лесна задача)