Broşür işaretleyicide açılır pencere konumu değiştiriliyor mu?

Leaflet'teki işaretçi simgesimin alt kısmında bir açılır pencere açmak istiyorum.

kodum:

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();

Bu yüzden işaretleyicimin üstünde bir açılır pencere var.

Aşağıdaki gibi bir pop-up almak istiyorum:

Ofsetleri popupAnchorseçenekleri kullanarak belirtebilirsiniz , ancak beklediğiniz yerde değil. İlk olarak, böyle bir simge belirtmeniz gerekir:

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

Daha sonra işaretçi seçeneklerinizde bu simgeyi kullanabilirsiniz:

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

Artık pop-up pencereniz işaretçinizin 30 piksel üzerinde açılıyor. Bu, küçük popish üçgeni pop-up'ınızın üstüne yerleştirmeniz gerektiği için tam olarak ne istediğinizi değil, ama yine de bahsetmeye değer olduğunu düşünüyorum.

Doğal bir broşür çözümü yoktur.

Başka bir yol https://github.com/erictheise/rrose kullanmaktır

Güzel Demo:

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

Bunun eski bir soru olduğunu biliyorum, ama cevabında açıklanan @Robert yolunu almanıza gerek yok.

PopupDevralındığı gibi , DivOverlayofset seçeneğini doğrudan başlatırken ayarlayabilirsiniz Popup:

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

Dokümanları okuyun: https://leafletjs.com/reference-1.5.0.html#popup

Bu sadece CSS'de mümkün görünüyor. Aşağıda !importantyalnızca üç CSS öğesini geçersiz kılıyorum ve bir :beforesözde öğe ekliyorum . Aslında ilk önce pop-up'ı alt yerine üst kısım ile sıralıyorum , burada 55px sadece seçtiğiniz işaretleyiciye ve kişisel zevkinize bağlı.

Sonra pop-up "ipucu" aşağıdan aşağıya hareket top:0pxve "normal" hile kullanarak yapılan olmadığını keşfetmek (yani: kabarcık kenarındaki ilk pozisyon kalın şeffaf kenarlık 0x0 boyutlu sahte bir öğe, sonra renk öğenin işaret etmek istediğiniz yerin zıt sınırı; bizim durumumuzda alt kenarlık). Bunun yerine, sol üst köşeden döndürülmüş bir dikdörtgenden yapılmış gibi görünüyor (belki: çünkü tarayıcıyı GPU'yu kullanmaya zorlar ve bu nedenle her şeyi hızlandırır?) Ve noktayı yeterince almıyorum (pun) benim ipucu doğru yerde ama görünmez); bu yüzden sadece yanlış yerde olan kutu gölgesini kaldırıyorum ve her şeyi olduğu gibi bırakıyorum --- "eski ipucunu" anlayan herkes bunu ayarlayın.

Bunun yerine, "normal" işlemle kendi ipucumu oluşturuyorum (emin değilseniz, 3x şeffaf ve 1x beyaz yerine aşağıdaki dört kenar rengini değiştirin --- örneğin 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;
}

Gibi bu JSFiddle gösteriyor, her iki işaretleri farklı açılır-boyutları ile hiçbir sorun (farklı genişlik, farklı textHeight) çalışırsanız.

Tüm bunlar, geçersiz kıldığım öğelerin değişmesi muhtemel olmadığından, Leaflet'deki güncellemelere karşı sağlam görünüyor.