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

Question

I want to remove close button in popup of marker. How to set option in openPopup() method. My code is:

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

The .openPopup method does not expect any option.

It is within the .bindPopup method that you can specify options for your Leaflet Popup.

In particular, you should be interested in the closeButton option:

Controls the presence of a close button in the popup.

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

Answer 2

In order to hide the x icon on the marker, you can set the display property of the relevant class to none . Try using the following code in your css file:

.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>