Вот картина. Инфобабль по умолчанию охватывает маркер, к которому он принадлежит (см. Нижний правый угол пузыря):
Это из их официального примера.
Есть ли простой способ сделать маркер выше пузыря, так что пузырь не скрывает его?
В настоящее время это сбивает с толку, потому что нелегко увидеть, к какому маркеру принадлежит пузырь.
Здесь мое простое решение, основанное на другом ответе "Поддержка" здесь:
var xy = map.geoToScreen(coords);
var bubble = new H.ui.InfoBubble(map.screenToGeo(xy.x, xy.y - 30), {
content: 'content'
});
ui.addBubble(bubble);
coords - координаты маркера, и он помещает infowindow на 30 пикселей выше маркера.
Это работает для меня, потому что в моем случае маркер всегда находится в центре карты.
Изменение: это не идеально, потому что, если вы увеличиваете масштаб карты, маркер и пузырь указывают на разные места, поэтому должен быть обработчик события, который обновляет положение пузырька при масштабировании
Вы можете попробовать этот пример кода:
// check if info bubble is visible, otherwise move the map center
function checkInfoBubble(infoBubble){
setTimeout(function() {
if(infoBubble && infoBubble.getState() == "open"){
var border = 50;
var objRect = infoBubble.getContentElement().parentElement.getBoundingClientRect();
var objStyleRight = Math.abs(parseInt(infoBubble.getContentElement().parentElement.style.right));
objStyleRight = objStyleRight ? objStyleRight : 0;
var mapRect = map.getElement().getBoundingClientRect();
var shiftX = 0;
var shiftY = 0;
// check, if infobubble isn't too far to up
if ((objRect.top-border) < mapRect.top) {
shiftY = (mapRect.top - (objRect.top-border));
}
// check, if infobubble isn't too far to the left
var objLeft = (objRect.left - objStyleRight);
if ((objLeft-border) < mapRect.left) {
shiftX = (mapRect.left - (objLeft-border));
} // check, if infobubble isn't too far to the right
else if ((objRect.right+border) > mapRect.right) {
shiftX = -(objRect.right - (mapRect.right-border));
}
if ((shiftX == 0) && (shiftY == 0)) {
return;
}
var currScreenCenter = map.geoToScreen(map.getCenter());
var newY = (currScreenCenter.y - shiftY);
var newX = (currScreenCenter.x - shiftX);
var newGeoCenter = map.screenToGeo(newX, newY);
map.setCenter(newGeoCenter, true);
}
}, 20);
}
Кроме того, здесь показано: https://tcs.ext.here.com/examples/v3/show_info_on_hover