Wie kann ich die Position eines MapBox-Popups ändern?

Question 1

Ich benutze Mapbox mit WordPress.

Ich sehe, dass das Popup standardmäßig eine Ankerposition hat, die CSS generiert.

Ich kann das Popup beim Klicken nicht zentrieren: Zum Beispiel werden einige Popups abgeschnitten, wenn ich es öffne, weil die Karte nicht darauf zentriert ist.

Ich habe alle Lösungen ausprobiert, die ich hier gefunden habe, keine davon funktioniert. Ich verwende kein Json, sondern eine WordPress-Schleife, um Markierungen anzuzeigen und Inhalte in Popups einzufügen. Ich finde keine Lösungen für etwas anderes als json . Ich möchte nur wissen, ob es möglich ist, die Position des Popups vollständig zu deaktivieren, sodass ich es immer in der Kartenecke platzieren kann, unabhängig davon, auf welche Markierung ich klicke.

Question 2

BEARBEITEN

Schließlich habe ich gerade etwas CSS geändert, damit das Popup links von der Karte bleibt: Ich habe die Standardposition des Ankers mit transform:none deaktiviert, ich platziere es in der Ecke des Kartencontainers mit top und left..Und dann habe ich das deaktiviert Pfeil um das Popup.

.mapboxgl-popup{
    transform:none !important;
     top: 15%;
    left: 10px;
}
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-center .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip, 
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip{
    display:none !important;
}

Question 3

Verwenden Sie dieses Beispiel aus dem Beispiel der offiziellen Kartenbox:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Display a popup</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-96, 37.8],
    zoom: 3
});

var popup = new mapboxgl.Popup({closeOnClick: false})
    .setLngLat([-96, 37.8])
    .setHTML('<h1>Hello World!</h1>')
    .addTo(map);
</script>

</body>
</html>

und Sie können das Beispielergebnis unter dem folgenden Link sehen:

https://www.mapbox.com/mapbox-gl-js/example/popup/