Ini sepertinya hanya mungkin di CSS. Di bawah ini saya menimpa (dengan !important
) hanya tiga elemen CSS, dan menambahkan satu :before
elemen semu. Pada dasarnya saya pertama-tama mengantre popup dengan bagian atas, bukan bagian bawah , di mana 55px
hanya tergantung pada penanda yang Anda pilih, dan selera pribadi.
Saya kemudian memindahkan "tip" popup dengan cara yang sama dari bawah ke top:0px
, dan menemukan itu tidak dibuat dengan menggunakan trik "normal" (yaitu: posisi pertama pada tepi gelembung elemen pseudo berukuran 0x0 dengan perbatasan transparan tebal, kemudian warna yang batas elemen yang berlawanan dari tempat yang ingin Anda tunjuk; dalam kasus kami, batas bawah). Alih-alih itu tampaknya dibuat dari persegi panjang yang diputar dari suatu tempat kiri-atas (mungkin: karena memaksa browser untuk menggunakan GPU dan karenanya mempercepat semuanya?) Dan saya tidak mendapatkan intinya (maafkan permainan kata-kata) dengan cukup baik ( tip saya di tempat yang tepat tetapi tidak terlihat); jadi saya hanya menghapus bayangan kotak yang sekarang ada di tempat yang salah dan membiarkan semuanya seperti adanya --- siapa pun yang mengerti "tip lama" tolong sesuaikan itu.
Jadi alih-alih saya membuat tip sendiri, dengan proses "normal" (jika Anda tidak yakin, ubah empat warna tepi di bawah, alih-alih 3x transparan dan 1x putih --- mis border-bottom-color: blue; border-left-color: green; border-top-color: yellow' border-right-color: red
.).
#map {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 0;
}
.leaflet-popup {top: 55px !important;}
/* Here I move the "tip" to the right location, but didn't succeed in making it visible. So I just remove the box-shadow and leave it: */
.leaflet-popup-tip-container {
top: 0px !important;
}
.leaflet-popup-tip {
box-shadow: none !important;
}
.leaflet-popup:before
{
content: "";
position: absolute;
border: 13px solid transparent;
border-bottom-color: white;
bottom: 0px;
margin-left: -13px;
}
Seperti yang diperlihatkan JSFiddle ini , tidak ada masalah dengan ukuran sembulan yang berbeda (lebar berbeda, beda textheight) jika Anda mencoba kedua penanda.
Semua dalam semua ini tampaknya kuat terhadap pembaruan di Leaflet karena item yang saya ganti sepertinya tidak akan berubah.