Thay đổi vị trí bật lên trên điểm đánh dấu?

Tôi muốn mở một cửa sổ bật lên ở dưới cùng của biểu tượng đánh dấu của tôi trong Tờ rơi.

mã của tôi:

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

Vì vậy, tôi nhận được một cửa sổ bật lên trên điểm đánh dấu của tôi.

Tôi muốn có một cửa sổ bật lên ở phía dưới như:

Không có giải pháp tờ rơi bản địa.

Một cách khác là sử dụng https://github.com/erictheise/rrose

Demo đẹp:

http://jsfiddle.net/as ngủwalker / 6m81vtad /

Bạn có thể chỉ định bù đắp bằng cách sử dụng các popupAnchortùy chọn, nhưng không phải nơi bạn mong đợi. Đầu tiên, bạn cần chỉ định một biểu tượng như thế này:

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

Sau đó, bạn có thể sử dụng biểu tượng này trong các tùy chọn đánh dấu của mình:

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

Bây giờ cửa sổ bật lên của bạn mở ra 30 px trên điểm đánh dấu của bạn. Đây không phải là chính xác những gì bạn yêu cầu vì bạn cũng cần đặt hình tam giác mũi tên nhỏ lên trên cửa sổ bật lên của mình, nhưng tôi nghĩ nó vẫn đáng được đề cập.

Tôi biết rằng đây là một câu hỏi cũ, nhưng bạn không cần phải đi đường vòng @Robert được mô tả trong câu trả lời của anh ấy.

Do Popupđược kế thừa từ DivOverlay, bạn có thể đặt tùy chọn bù trực tiếp khi khởi tạo Popup:

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

Đọc tài liệu: https://leafletjs.com/reference-1.5.0.html#popup

Điều này dường như có thể chỉ trong CSS. Bên dưới tôi đang ghi đè ( !importantchỉ) ba phần tử CSS và thêm một :beforephần tử giả. Về cơ bản, trước tiên tôi xếp hàng cửa sổ bật lên với đầu thay vì dưới cùng , nơi 55px chỉ phụ thuộc vào điểm đánh dấu bạn chọn và sở thích cá nhân.

Sau đó, tôi di chuyển "mẹo" của cửa sổ bật lên tương tự từ dưới lên top:0pxvà phát hiện ra nó không được thực hiện bằng thủ thuật "bình thường" (nghĩa là: vị trí đầu tiên trên cạnh của bong bóng một phần tử giả có kích thước 0x0 với đường viền trong suốt dày, sau đó tô màu đường viền đối diện của phần tử nơi bạn muốn trỏ đến, trong trường hợp của chúng tôi, đường viền dưới cùng). Thay vào đó, nó dường như được tạo ra từ một hình chữ nhật được xoay từ một nơi nào đó trên cùng bên trái (có thể: bởi vì nó buộc trình duyệt sử dụng GPU và do đó tăng tốc mọi thứ?) Và tôi không đủ điểm (tha thứ cho trò chơi chữ) mẹo của tôi ở đúng nơi nhưng vô hình); Vì vậy, tôi chỉ cần loại bỏ bóng hộp bây giờ ở sai vị trí và để nguyên như vậy --- bất cứ ai hiểu "mẹo cũ" xin vui lòng điều chỉnh nó.

Vì vậy, thay vì tôi tự đưa ra mẹo của mình, với quy trình "bình thường" (nếu bạn không chắc chắn, hãy thay đổi bốn màu viền bên dưới, thay vì 3x trong suốt và 1x trắng --- vd 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;
}

Như JSFiddle này chứng minh, không có vấn đề gì với các kích thước cửa sổ bật lên khác nhau (chiều rộng khác nhau, textheight khác nhau) nếu bạn thử cả hai điểm đánh dấu.

Tất cả trong tất cả điều này có vẻ mạnh mẽ đối với các bản cập nhật trong Tờ rơi vì các mục tôi ghi đè dường như không thể thay đổi.