Question

我正在尝试向information bubble添加一个pointerenter事件，但它没有被触发。我用标记工作但没有信息泡泡。

我尝试使用addEventHandler将事件处理程序添加到信息气泡中，如下所示：

var infoBubble = new H.ui.InfoBubble({lat:48.8567, lng:2.3508}, {
    content: "<div>hello</div>"  
});
infoBubble.addEventListener('pointerenter', function (evt) {
    alert('pointerenter');    
});

我也尝试将mouseOver事件添加到info bubble内容元素中，但也不会触发。

var infoBubble = new H.ui.InfoBubble({lat:48.8567, lng:2.3508}, {
    content: "<div>hello</div>"  
});

mapUI.addBubble(infoBubble);

var infoBubbleContent = infoBubble.getContentElement();
infoBubbleContent.addEventListener('mouseOver', function(evt){
    alert('mouse over');
});

这是完整的代码。

// Initialize the platform object:
var platform = new H.service.Platform({
'app_id': 'xxx',
'app_code': 'xxx'
});

// Obtain the default map types from the platform object
var maptypes = platform.createDefaultLayers();

// Instantiate (and display) a map object:
var map = new H.Map(
document.getElementById('mapContainer'),
maptypes.normal.map,
{
  zoom: 4,
  center: {lat:50, lng:5}
});

// Enable the event system on the map instance:
var mapEvents = new H.mapevents.MapEvents(map); 

// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(mapEvents);

// create default UI with layers provided by the platform
var mapUI = new H.ui.UI.createDefault(map, maptypes);

var infoBubble = new H.ui.InfoBubble({lat:48.8567, lng:2.3508}, {
    content: "<div>hello</div>"  
});
infoBubble.addEventListener('pointerenter', function (evt) {
                alert('pointerenter');
});

mapUI.addBubble(infoBubble);

/*
var infoBubbleContent = infoBubble.getContentElement();
infoBubbleContent.addEventListener('mouseOver', function(evt){
    alert('mouse over');
});
*/

var standardMarker = new H.map.Marker(new H.geo.Point(40.4, -3.6833));
standardMarker.addEventListener('pointerenter', function (evt) {
                alert('pointerenter');
});

map.addObject(standardMarker);

Answer 1

虽然InfoBubble是一个事件目标，但它自己调度的唯一事件是“statechange”。但是，添加气泡后，您可以获取气泡的HTML元素并在其上使用普通的旧HTML事件：

var bubble = new H.ui.InfoBubble({lat:48.8567, lng:2.3508}, {
  content: "<div>hello</div>"  
});
ui.addBubble(bubble);
bubble.getElement().addEventListener('mouseover', function(e) {
  console.log('hello there');
});

注意：气泡的HTML仅在添加到UI后才构建。在getElement（）方法返回null之前。

HERE Maps（JS v3） - 为信息气泡添加事件监听器

1 个答案: