如何更改传单上缩放按钮的不透明度？

Question

我正在尝试更改放置在传单地图右上角的缩放控制按钮的不透明度。我尝试做“ mymap.zoomControl.setPosition（'topright'）。setOpacity（0.5）;”在最后一行，但是当我加载页面时，它会使整个地图消失。如果您知道用于更改地图上缩放按钮的不透明度以使用户能够看透的代码，请告诉我。

var southWest = L.latLng(-89.98155760646617, -180), northEast = L.latLng(89.99346179538875, 180);
var bounds = L.latLngBounds(southWest, northEast);
var mymap = L.map('map', {
    center: [20.594, 78.962],
    maxBounds: bounds, // set max bounds for the world map
    zoom: 4, // default zoom level when the web is initiated
    zoomSnap: 0.25, // map's zoom level must be in multiple of this
    zoomDelta: 0.25, // controls how much the map's zoom level will change after a zoom
    minZoom: 3.25, // min zoom level the user can zoom out
    maxZoom: 6, // max zoom level the user can zoom in
    zoomControl: true, // allow zooming
});
mymap.zoomControl.setPosition('topright'); // set + and - zoom buttons to top right corner .setOpacity('0.4')
var MapAttribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>';
var DarkMatterUrl = 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'; // For dark theme map
var PositronUrl = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'; // For light theme map
var tiles = L.tileLayer(DarkMatterUrl, { MapAttribution }).addTo(mymap); 
// Array of marker coordinates
var markers = [
{
    coords:[4.21, 101.97],
    country:'Malaysia',
    label:'Malaysia',
},
{
    coords:[20.594, 78.962],
    country:'India',
    label:'India',
},
{
    coords:[35.861, 104.195],
    country:'China',
    label:'China',
},
{
    coords:[23.421, 53.8478],
    country:'UAE',
    label:'UAE',
},
{
    coords:[23.6978, 120.9605],
    country:'Taiwan',
    label:'Taiwan',
},
{
    coords:[0.7892, 113.9213],
    country:'Indonesia',
    label:'Indonesia',
},
];
// Edit marker icons
var myIcon = L.icon({
    iconUrl: 'yellowcircle.png',
    iconSize: [40, 40], // size of the icon
    // iconAnchor: [],
    // popupAnchor: [],
});
// Loop through markers
for(var i = 0; i<markers.length; i++){
    addMarker(markers[i]);
}
// To add the marker coordinates
function addMarker(props){
    var marker = L.marker(props.coords, {icon:     myIcon}).bindTooltip(props.country).addTo(mymap);
marker.on('mouseover', function(e){
    marker.openPopup(); 
});
marker.on('mouseout', function(e){
    marker.closePopup();
});

}

Answer 1

https://leafletjs.com/reference-1.6.0.html#domutil-setopacity

var mymap = L.map('map', {
  center: [20.594, 78.962],
  zoom: 4,
  zoomSnap: 0.25,
  zoomDelta: 0.25,
  minZoom: 3.25,
  maxZoom: 6,
  zoomControl: true
});

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


mymap.zoomControl.setPosition('topright');

L.DomUtil.setOpacity(mymap.zoomControl.getContainer(), 0.5);

#map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<div id="map"></div>