如何在 Leaflet openPopup 中設置各種選項？

Question

我想刪除標記彈出窗口中的關閉按鈕。 如何在 openPopup() 方法中設置選項。 我的代碼是：

var mymap = L.map('map1').setView([lat, lng], 13);

var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(mymap);

var marker = L.marker([lat, lng]).addTo(mymap);
marker.bindPopup(loc_address);

marker.on('mouseover', function (e) {       
     this.openPopup();
});

marker.on('mouseout', function (e) {
     this.closePopup();
});

Answer 1

.openPopup方法不需要任何選項。

您可以在.bindPopup方法中為 Leaflet Popup 指定選項。

特別是，您應該對closeButton選項感興趣：

控制彈出窗口中關閉按鈕的存在。

marker.bindPopup(loc_address, {
  closeButton: false
});

Answer 2

為了隱藏標記上的 x 圖標，您可以將相關類的display屬性設置為none 。 嘗試在您的 css 文件中使用以下代碼：

.leaflet-popup-close-button {
   display: none; 
}

 var map = L.map('mapid').setView([51.505, -0.09], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); L.marker([51.5, -0.09]).addTo(map) .bindPopup('A pretty CSS3 popup.<br> Easily customizable.') .openPopup();

 #mapid { height: 100vh; } body { margin: 0px; } .leaflet-popup-close-button { display: none; }

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" /> <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script> <div id="mapid"></div>