Mapbox弹窗锚点始终为bottom问题排查求助（Vue/Vuetify场景）

Let's break down what's happening here and how to fix it:

The Core Issue #

Your observation is spot-on: the popup always gets stuck with the bottom anchor class when opening near the map edge, but fixes itself after panning the map. This is almost certainly tied to how your Vue/Vuetify content loads after the Mapbox popup initializes its position.

Why This Happens #

Looking at your code flow:

1. You create a popup and set its HTML to an empty <div id="vue-popup-content"></div>. At this point, the popup has virtually no height/width.
2. Mapbox calculates the optimal anchor based on this empty content—since there's barely any content, it defaults to bottom without considering the eventual size of your Vuetify carousel.
3. You then mount your Vue component into that empty div, which renders the actual carousel content. This drastically changes the popup's dimensions, but Mapbox doesn't automatically re-calculate the anchor or position.
4. When you pan the map, Mapbox triggers a re-render of all popups, which now uses the real content size to pick the correct anchor (keeping it inside the map container).

Fixes to Try #

1. Manually Update the Popup After Vue Mounts

The simplest fix is to tell Mapbox to re-calculate the popup's position and anchor once your Vue component is fully mounted. Add clickPopup.update() right after mounting the component:

popupInstance.$mount("#vue-popup-content");
// Force Mapbox to re-evaluate the popup's anchor and position
clickPopup.update();

2. Pre-Define Popup Dimensions

If you know the approximate size of your Vuetify carousel, set a fixed height/width on the popup container before mounting the Vue component. This gives Mapbox accurate dimensions to work with during initial anchor calculation:

clickPopup.setHTML('<div id="vue-popup-content" style="width: 320px; min-height: 240px;"></div>')

3. Explicitly Set Auto-Anchor (Optional)

While Mapbox Popup defaults to anchor: 'auto', explicitly setting it can sometimes resolve edge-case issues where the auto-calculation gets stuck:

let clickPopup = new mapboxgl.Popup({ 
  offset: 32, 
  closeButton: false, 
  closeOnClick: true,
  anchor: 'auto' // Explicitly enable automatic anchor selection
});

Vuetify's Role #

Vuetify components often come with default margins, padding, and dynamic content loading (like images in your carousel) that can cause sudden size changes after initial render. This makes the initial anchor calculation even less accurate—hence why the update() call is so critical to sync Mapbox with the final content size.

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