javascript - Masalah JS dan CSS, selepas menggerakkan tetikus ke ikon pada peta, bagaimana untuk memusatkan kandungan yang dipaparkan berbanding ikon.

Question

Seperti yang ditunjukkan dalam gambar di bawah, yang di sebelah kanan adalah kesan yang saya perlukan, iaitu, apabila tetikus digerakkan ke atas ikon lokasi merah pada peta, foto dan kandungan yang dipaparkan adalah berpusat berbanding ikon lokasi di bawah. Bahagian kiri adalah kesan yang saya buat. Anjakan itu terlalu serius.

Di bawah ialah kod HTML saya

<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

Kod yang anda siarkan tidak bermakna Ia hanya menunjukkan kedudukan ikon merah dan tidak memberikan struktur dan gaya kotak timbul. Nampaknya bahagian pop timbul dijana secara dinamik dan diselaraskan oleh js. Dua idea:

1. Tambahkan lapisan terapung pada ikon span tag dan tetapkan gaya lapisan terapung

Apabila tetikus bergerak ke atas ikon, kandungan data lapisan terapung dijana secara dinamik dan ditambahkan pada teg span. Mengalih keluar lapisan yang ditambah secara dinamik apabila tetikus dialihkan keluar. Anda perlu menetapkan gaya untuk lapisan terapung, kira-kira seperti berikut:

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

Anda perlu memberi perhatian kepada perubahan atribut z-index span 的 z-index, kerana lapisan terapung tertanam di dalamnya, jadi lapisan terapung mungkin dikaburkan.

2. Pelarasan dinamik JS

Jika lapisan terapung anda mempunyai saiz tetap, maka anda hanya perlu menggunakan JS untuk mendapatkan ikon yang dipilih pada masa ini, baca kedudukan relatifnya, kemudian kira kedudukan lapisan terapung:

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