HERE 地图 (JS v3） - 将事件侦听器添加到信息气泡

HERE Maps (JS v3) - Add event listener to info bubble

本文关键字：侦听器 事件 添加 气泡 信息 地图 JS v3 HERE      更新时间：2023-09-26

我正在尝试将指针输入事件添加到信息气泡，但它没有触发。我让它与标记一起使用，但不能与信息气泡一起使用。

我尝试使用 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 事件添加到信息气泡内容元素，但这也不会触发。

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);

虽然 InfoBubble 是一个事件目标，但它自己调度的唯一事件是"状态更改"。但是，添加气泡后，您可以获取气泡的 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 之前。

相关文章：