如何在 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

为了隐藏标记上的 x 图标，您可以将相关 class 的 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>

Answer 2

.openPopup 方法不需要任何选项。

您可以在 .bindPopup 方法中为 Leaflet Popup 指定选项。

特别是，您应该对 closeButton 选项感兴趣：

Controls the presence of a close button in the popup.

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

如何在 Leaflet openPopup 中设置各种选项？

How to set various option in Leaflet openPopup?

javascript

popup

leaflet