การเปลี่ยนตำแหน่งป๊อปอัปในเครื่องหมายของแผ่นพับ?

ฉันต้องการเปิดป๊อปอัพที่ด้านล่างของไอคอนเครื่องหมายของฉันใน Leaflet

รหัสของฉัน:

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

ดังนั้นฉันจึงได้รับป๊อปอัปที่ด้านบนของเครื่องหมายของฉัน

ฉันต้องการป๊อปอัปที่ด้านล่างเช่น:

คุณสามารถระบุออฟเซ็ตได้โดยใช้popupAnchorตัวเลือก แต่จะไม่ระบุตำแหน่งที่คุณต้องการ ก่อนอื่นคุณต้องระบุไอคอนดังนี้:

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

จากนั้นคุณสามารถใช้ไอคอนนี้ในตัวเลือกเครื่องหมายของคุณ:

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

ตอนนี้ป๊อปอัพของคุณเปิดขึ้น 30 px เหนือเครื่องหมายของคุณ นี่ไม่ใช่สิ่งที่คุณต้องการเพราะคุณจำเป็นต้องวางลูกศรสามเหลี่ยมเล็ก ๆ ไว้ที่ด้านบนสุดของป๊อปอัพของคุณ แต่ฉันคิดว่ามันก็คุ้มค่าที่จะกล่าวถึง

ไม่มีโซลูชันใบปลิวดั้งเดิม

อีกวิธีหนึ่งคือใช้https://github.com/erictheise/rrose

การสาธิตที่ดี:

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

ฉันรู้ว่านี่เป็นคำถามเก่า แต่คุณไม่จำเป็นต้องใช้ @Robert ทางอ้อมที่อธิบายไว้ในคำตอบของเขา

ในฐานะที่Popupเป็นที่สืบทอดจากDivOverlayคุณสามารถตั้งค่าตัวเลือกชดเชยโดยตรงเมื่อการเริ่มต้นPopup:

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

อ่านเอกสาร: https://leafletjs.com/reference-1.5.0.html#popup

ดูเหมือนว่าจะเป็นไปได้ใน CSS ด้านล่างฉันกำลังเอาชนะ (ด้วย!important) เพียงสามองค์ประกอบ CSS และเพิ่มหนึ่ง:beforeองค์ประกอบหลอก โดยพื้นฐานแล้วฉันจะเรียงป๊อปอัปกับด้านบนแทนด้านล่างซึ่ง55px ขึ้นอยู่กับเครื่องหมายที่คุณเลือกและรสนิยมส่วนตัว

จากนั้นฉันก็ย้าย "เคล็ดลับ" ของป๊อปอัปในทำนองเดียวกันจากด้านล่างไปยังtop:0pxและค้นพบว่ามันไม่ได้ทำโดยใช้เคล็ดลับ "ปกติ" (นั่นคือ: ตำแหน่งแรกบนขอบของฟองเป็นองค์ประกอบหลอก 0x0 ขนาดที่มีขอบโปร่งใสหนา ขอบตรงข้ามขององค์ประกอบที่คุณต้องการชี้ในกรณีของเราขอบล่าง) แต่ดูเหมือนว่ามันจะทำจากสี่เหลี่ยมหมุนในจากด้านบนซ้าย (อาจ: เพราะมันบังคับให้เบราว์เซอร์ใช้ GPU ดังนั้นจึงเร่งทุกอย่าง?) และฉันไม่เข้าใจ (อภัยโทษปุน) ดีพอ ( เคล็ดลับของฉันอยู่ในสถานที่ที่เหมาะสม แต่มองไม่เห็น); ดังนั้นฉันจึงลบเงาของกล่องที่ตอนนี้อยู่ผิดที่และทิ้งทุกอย่างตามที่เป็น --- ทุกคนที่เข้าใจ "เคล็ดลับเก่า" โปรดปรับเปลี่ยน

ดังนั้นแทนที่จะทำเคล็ดลับของตัวเองด้วยกระบวนการ "ปกติ" (ถ้าคุณไม่แน่ใจให้เปลี่ยนสีสี่เส้นด้านล่างแทน 3x โปร่งใสและ 1x สีขาว --- เช่น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;
}

เนื่องจากJSFiddle นี้แสดงให้เห็นว่าไม่มีปัญหากับขนาดป๊อปอัปที่แตกต่างกัน (ความกว้างที่แตกต่างกัน, เท็กซ์ที่แตกต่างกัน) หากคุณลองใช้เครื่องหมายทั้งสอง

ทั้งหมดนี้ดูเหมือนจะแข็งแกร่งเมื่อเทียบกับการอัปเดตในแผ่นพับเนื่องจากรายการที่ฉันลบล้างดูเหมือนจะไม่เปลี่ยนแปลง