Mengubah posisi sembulan pada penanda Leaflet?

Saya ingin membuka sembulan di bawah ikon penanda saya di Leaflet.

kode saya:

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    id: 'mapbox.streets'
}).addTo(mymap);

var lati = 51.51;
var longi = -0.09;

var popupLocation1 = new L.LatLng(lati, longi);
var popupContent1 = 'This is a nice popup';

popup1 = new L.Popup();
popup1.setLatLng(popupLocation1);
popup1.setContent(popupContent1);

var m1 = L.marker([ lati, longi ]).addTo(mymap);

m1.bindPopup(popup1);

m1.openPopup();

Jadi saya mendapatkan popup di atas spidol saya.

Saya ingin mendapatkan sembulan di bawah seperti:

Anda dapat menentukan offset dengan menggunakan popupAnchoropsi, tetapi tidak sesuai yang Anda harapkan. Pertama, Anda perlu menentukan ikon seperti ini:

var myIcon = L.divIcon({ popupAnchor: [0, -30] });

Anda kemudian dapat menggunakan ikon ini di opsi marker Anda:

var marker = L.marker(location, {
                 icon: myIcon
             }).bindPopup(function (marker) {...}); //Shortened

Sekarang popup Anda membuka 30 px di atas marker Anda. Ini bukan apa yang Anda minta karena Anda juga perlu menempatkan segitiga panah kecil di atas popup Anda, tapi saya pikir itu masih layak disebut.

Tidak ada solusi leaflet asli.

Salah satu cara lain adalah menggunakan https://github.com/erictheise/rrose

Demo Bagus:

http://jsfiddle.net/asleepwalker/6m81vtad/

Saya tahu bahwa ini adalah pertanyaan lama, tetapi Anda tidak perlu mengambil jalan memutar @Robert yang dijelaskan dalam jawabannya.

Seperti Popupmewarisi dari DivOverlay, Anda dapat mengatur opsi offset secara langsung saat menginisialisasi Popup:

    var popup = L.popup({
        offset: [0, -30]
    })
      .setLatLng(location)
      .setContent("Test Text")
      .openOn(mapId);

Baca dokumen: https://leafletjs.com/reference-1.5.0.html#popup

Ini sepertinya hanya mungkin di CSS. Di bawah ini saya menimpa (dengan !important) hanya tiga elemen CSS, dan menambahkan satu :beforeelemen 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.