HERE地图中如何结合mouseover与mouseleave事件使用Infobubble

Hey there! Let me walk you through exactly how to get that hover-to-display, mouseout-to-close infobubble behavior working on your HERE Map. I’ve tackled this exact scenario before, so let’s break it down step by step.

First, a quick heads-up: HERE Maps uses pointer events (pointerenter/pointerleave) instead of the standard mouseover/mouseleave—but they work the same way for desktop interactions, and they’re more touch-device friendly too.

Basic Single Marker Implementation #

Start with a fully initialized HERE Map instance, then create your marker and its corresponding infobubble. Bind the pointer events to control the bubble’s visibility:

// Assume you've already initialized your map instance as `map`
const ui = H.ui.UI.createDefault(map);

// Create a marker at your desired coordinates
const berlinMarker = new H.map.Marker({ lat: 52.5308, lng: 13.3847 });
map.addObject(berlinMarker);

// Create an infobubble tied to the marker's position
const berlinBubble = new H.ui.InfoBubble(berlinMarker.getGeometry(), {
  content: `
    <div style="padding: 10px;">
      <h3>Berlin</h3>
      <p>Capital of Germany | Population: ~3.7M</p>
    </div>
  `
});

// Show bubble when mouse hovers over the marker
berlinMarker.addEventListener('pointerenter', () => {
  ui.addBubble(berlinBubble);
});

// Hide bubble when mouse leaves the marker
berlinMarker.addEventListener('pointerleave', () => {
  ui.removeBubble(berlinBubble);
});

Handling Multiple Markers (Avoid Common Pitfalls) #

If you’re working with a list of locations, make sure you create a unique infobubble for each marker inside your loop. Don’t reuse the same bubble variable—this will cause all markers to show the same bubble or break the behavior entirely:

const locations = [
  { lat: 52.5308, lng: 13.3847, name: 'Berlin', desc: 'Capital of Germany' },
  { lat: 48.8566, lng: 2.3522, name: 'Paris', desc: 'Capital of France' },
  { lat: 51.5074, lng: -0.1278, name: 'London', desc: 'Capital of the UK' }
];

const ui = H.ui.UI.createDefault(map);

locations.forEach(location => {
  // Create marker
  const marker = new H.map.Marker({ lat: location.lat, lng: location.lng });
  map.addObject(marker);

  // Create unique infobubble for this marker
  const bubble = new H.ui.InfoBubble(marker.getGeometry(), {
    content: `
      <div style="padding: 10px;">
        <h3>${location.name}</h3>
        <p>${location.desc}</p>
      </div>
    `
  });

  // Bind hover events
  marker.addEventListener('pointerenter', () => ui.addBubble(bubble));
  marker.addEventListener('pointerleave', () => ui.removeBubble(bubble));
});

Quick Troubleshooting Tips #

• Make sure you’ve loaded the UI module: Infobubbles are part of HERE’s UI components, so your script imports should include js-ui.js alongside the core map script.
• Check for overlapping markers: If markers are stacked, the top marker might block pointer events for those below. Try adjusting marker zIndex or using HERE’s clustering feature.
• Avoid delayed closures: If you’re using async operations to load locations, ensure each marker-bubble pair is encapsulated correctly (the forEach loop above handles this naturally).

Hope this gets your hover infobubbles working flawlessly! Let me know if you hit any edge cases.

内容的提问来源于stack exchange，提问作者Muhammad Zakir