我如何定製傳單彈出窗口的外觀？

Question

我正在尋找自定義使用傳單構建的地圖，我想定製Popup（L.popup）。

我能想到的唯一方法是在每次用戶與標記進行交互時用我的新對話框構建自定義彈出層，並在用戶與標記進行交互時重新定位此層，這樣當用戶拖動地圖時彈出保持對齊狀態。

有沒有人知道有任何替代方法或現有的做法呢？

謝謝

Answer 1

您應該使用css自定義外觀。下面的選擇可能是有趣：

.leaflet-popup-content-wrapper { 
} 

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

.leaflet-popup-tip-container { 
} 

根據您的瀏覽器，就可以使用工具，如Firebug的Firefox或Chrome瀏覽器/ Safari瀏覽器（開發工具構建右鍵單擊頁面上的任何位置，然後點擊審查元素，或使用shortcuts）來檢查彈出窗口並找到您可能想要修改的其他css選擇器。

要擴展它的功能，您應該首先查看popup source code。查看其他Leaflet組件的來源，直到您對發生的事情有所感覺。擴展彈出類以下列方式，進而改變任何你想要的：

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

Answer 2

有一個在mapbox它使用leaflet.js的例子了。 該示例顯示如何使用custom tooltip in leaflet。

<style> 
/* 
* These CSS rules affect the tooltips within maps with the custom-popup 
* class. See the full CSS for all customizable options: 
* https://github.com/mapbox/mapbox.js/blob/001754177f3985c0e6b4a26e3c869b0c66162c99/theme/style.css#L321-L366 
*/ 
.custom-popup .leaflet-popup-content-wrapper { 
    background:#2c3e50; 
    color:#fff; 
    font-size:16px; 
    line-height:24px; 
    } 
.custom-popup .leaflet-popup-content-wrapper a { 
    color:rgba(255,255,255,0.5); 
    } 
.custom-popup .leaflet-popup-tip-container { 
    width:30px; 
    height:15px; 
    } 
.custom-popup .leaflet-popup-tip { 
    border-left:15px solid transparent; 
    border-right:15px solid transparent; 
    border-top:15px solid #2c3e50; 
    } 
</style> 

<div class='custom-popup' id='map'></div> 

Answer 3

定製彈出的另一種方式是通過創建自定義CSS類像彈出：

<style> 
/* css to customize Leaflet default styles */ 
.popupCustom .leaflet-popup-tip, 
.popupCustom .leaflet-popup-content-wrapper { 
    background: #e0e0e0; 
    color: #234c5e; 
} 
</style> 

，然後在你映射div可以設置標記定義彈出與bindPopup方法和傳遞customOptions對象，其中你提到的css class name：

// create popup contents 
var customPopup = "<b>My office</b><br/><img src='http://netdna.webdesignerdepot.com/uploads/2014/05/workspace_06_previo.jpg' alt='maptime logo gif' width='150px'/>"; 

// specify popup options 
var customOptions = 
    { 
    'maxWidth': '400', 
    'width': '200', 
    'className' : 'popupCustom' 
    } 


var marker = L.marker([lat, lng], {icon: myIcon}).addTo(map); 

// bind the custom popup 
marker.bindPopup(customPopup,customOptions); 

希望它幫助。