javascript - Problème JS et CSS, après avoir déplacé la souris sur une icône de la carte, comment centrer le contenu affiché par rapport à l'icône.

Question

Comme le montre l'image ci-dessous, celui de droite est l'effet dont j'ai besoin, c'est-à-dire que lorsque la souris est déplacée sur l'icône de localisation rouge sur la carte, les photos et le contenu affichés sont centrés par rapport à l'icône de localisation ci-dessous. Le côté gauche est l'effet que j'ai fait. Le déplacement est trop grave, aidez-moi à y jeter un œil.

Ci-dessous mon code HTML

<p style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 700;"><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; width: 20px; height: 27px; left: 2044px; top: -747px; z-index: -5912030; background: url(&quot;http://api0.map.bdimg.com/images/blank.gif&quot;);" title=""></span><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; width: 20px; height: 27px; left: 1949px; top: -704px; z-index: -5911996; background: url(&quot;http://api0.map.bdimg.com/images/blank.gif&quot;);" title=""></span><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; width: 20px; height: 27px; left: -2.37214e+07px; top: 6.85098e+06px; z-index: 0; background: url(&quot;http://api0.map.bdimg.com/images/blank.gif&quot;);" title=""></span><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; width: 20px; height: 27px; left: 1892px; top: -717px; z-index: -5912006; background: url(&quot;http://api0.map.bdimg.com/images/blank.gif&quot;);" title=""></span><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; width: 20px; height: 27px; left: 1979px; top: -703px; z-index: -5911996; background: url(&quot;http://api0.map.bdimg.com/images/blank.gif&quot;);" title=""></span><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; width: 18px; height: 18px; left: 1788px; top: -516px; z-index: 19000000; -webkit-user-select: none; display: none; background: url(&quot;http://api0.map.bdimg.com/images/blank.gif&quot;);" title=""></span></p>

Answer 1

Le code que vous avez posté n'a aucun sens. Il montre uniquement la position de l'icône rouge et ne donne pas la structure et le style de la boîte pop-up. Il semble que la partie pop-up soit générée et ajustée dynamiquement par js. Deux idées :

1. Ajoutez le calque flottant à la balise icône span et définissez le style du calque flottant

.

Lorsque la souris passe sur l'icône, le contenu des données de la couche flottante est généré dynamiquement et ajouté à la balise span. Déplace les calques ajoutés dynamiquement lorsque la souris est déplacée. Vous devez définir le style du calque flottant, à peu près comme suit :

span.BMap_Marker > .浮动层 {
    background-color: #fff;
    /* 基础样式略 */
    bottom: 100%;
    left: 50%;
    margin-left: -48px; /* 假设你的浮动层总宽度为 96px， */
    position: absolute;
}

Vous devez faire attention au changement de l'attribut z-index de span 的 z-index, car le calque flottant y est intégré, donc le calque flottant peut être obscurci.

2. Ajustement dynamique JS

Si votre calque flottant a une taille fixe, il vous suffit d'utiliser JS pour obtenir l'icône actuellement sélectionnée, lire sa position relative, puis calculer la position du calque flottant :

left: 图标的left - (浮动层宽度/2);
top: 图标的top - 浮动层高度;