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

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

setOpacity() 来自 Dom Util

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/leaflet@1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>

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

Answer 2

    <!doctype html>
    <html ng-app="App">
    <head>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
      <script type="text/javascript" src="script.js"></script>
       <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
    <style>

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

    </style>

    </head>
    <body>
      <div ng-controller="Ctrl">
    <div id="map"></div>
      </div>
    <script>

      console.log(L.map)
      var mymap = L.map('map', {
      center: [23.022505, 72.571365],
      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);
    </script>
    </body>
    </html>

您必须将 titleLayer 添加到 L-map 中。你能参考我的代码吗？您可以使用 plunker link 来检查我的代码：笨蛋 Link:http://embed.plnkr.co/daSnET/ 复制上面的代码并粘贴到 HTML 文件中你可以查看地图，你可以更改不透明度并检查。

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

how to change opacity of zoom buttons on leaflet?

html

javascript

css

zooming

leaflet