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

我正在尝试更改位于传单地图右上角的缩放控制按钮的不透明度。我尝试在最后一行执行"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();
});

}

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>

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

您必须将标题图层添加到 L 映射中。你能参考我的代码吗？您可以使用 plunker 链接来检查我的代码： Plunker Link：http：//embed.plnkr.co/daSnET/复制上面的代码并粘贴到HTML文件中，您可以查看地图，并且可以更改不透明度并进行检查。

相关内容

最新更新

热门标签：