問題描述

我正在考慮自定義使用傳單構建的地圖，我想自定義彈出窗口 (L.popup).

I am looking at customising a map built using leaflet and I would like to customise the Popup (L.popup).

我能想到的唯一方法是在我的新對話框中構建一個自定義彈出層，并在每次用戶與標記交互時重新定位它，這樣當用戶拖動地圖時彈出框保持對齊.

The only method I can think of is to build a custom popup layer with my new dialog in and reposition this every time the user interacts with a marker, this way the popup stays aligned when the user drags the map.

有人知道這樣做的任何替代方案或現有方法嗎?

Is anyone aware of any alternatives or existing ways of doing this?

謝謝

推薦答案

您應該使用 css 自定義外觀.以下選擇器可能很有趣:

You should customize the look and feel using css. The following selectors are probably interesting:

.leaflet-popup-content-wrapper {
}

.leaflet-popup-content-wrapper .leaflet-popup-content {
}

.leaflet-popup-tip-container {
}

根據您的瀏覽器，您可以使用 Firefox 的 Firebug 等工具或 Chrome/Safari 中的內置開發人員工具(右鍵單擊頁面上的任意位置并單擊檢查元素，或使用 快捷方式)，檢查彈出窗口并找到您可能想要修改的其他 css 選擇器.

Depending on your browser, you can use tools like Firebug for Firefox or the build in developer tools in Chrome/Safari (right click anywhere on the page and click Inspect element, or use shortcuts), to inspect the popup and find additional css selectors that you may want to modify.

要擴展它的功能，您應該首先查看 彈出窗口源代碼.查看其他 Leaflet 組件的來源，直到您對正在發生的事情有所了解.通過以下方式擴展 Popup 類，然后更改任何您想要的內容:

To extend it's functionality you should start by looking at the popup source code. Look at the sources of other Leaflet components until you get some feeling for what's going on. Extend the Popup class in the following way, and then change whatever you want:

L.CustomPopup = L.Popup.extend({
  // You changes here
});

這篇關于我將如何自定義傳單彈出窗口的外觀和感覺?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！