谷歌地图数据层不透明度控制从外部按钮

Question

我正在尝试通过setStyle控制Google地图数据层不透明度。有一个属性填充不透明度，其值介于 0.0 和 1.0 之间。

google.maps.event.addDomListener(OpacityPbutton, 'click', function() {
map.data.setStyle({fillOpacity: '0.4'});
});   

我可以将不透明度更改为 0.4，但我需要让它增量。 就像每次我单击按钮一样，它将不透明度增加 0.1。 非常感谢您的建议。

请检查 JSFiddle

代码片段：

var map;
function OpControl(controlDiv, map) {
controlDiv.style.padding = '5px';
// Set CSS for the control wrapper
var controlWrapper = document.createElement('div');
controlWrapper.style.backgroundColor = 'white';
controlWrapper.style.borderStyle = 'solid';
controlWrapper.style.borderColor = 'gray';
controlWrapper.style.borderWidth = '1px';
controlWrapper.style.cursor = 'pointer';
controlWrapper.style.textAlign = 'center';
controlWrapper.style.width = '32px';
controlWrapper.style.height = '64px';
controlDiv.appendChild(controlWrapper);
// Set CSS for the Opacity Plus
var OpacityPbutton = document.createElement('div');
OpacityPbutton.style.width = '32px';
OpacityPbutton.style.height = '32px';
OpacityPbutton.style.backgroundImage = 'url("http://placehold.it/32/00ff00")';
controlWrapper.appendChild(OpacityPbutton);
// Set CSS for the Opacity Minus
var OpacityMbutton = document.createElement('div');
OpacityMbutton.style.width = '32px';
OpacityMbutton.style.height = '32px';
OpacityMbutton.style.backgroundImage = 'url("http://placehold.it/32/0000ff")';
controlWrapper.appendChild(OpacityMbutton);
// Setup the click event listener - Opacity plus
google.maps.event.addDomListener(OpacityPbutton, 'click', function() {
// map.setZoom(map.getZoom() + 1);
map.data.setStyle({
fillOpacity: '0.4'
});
});
// Setup the click event listener - Opacity Minus
google.maps.event.addDomListener(OpacityMbutton, 'click', function() {
// map.setZoom(map.getZoom() - 1);
map.data.setStyle({
fillOpacity: '0.8'
});
});
}
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
disableDefaultUI: true,
center: {
lat: -33.865143,
lng: 151.209900
}
});
var opacityControlDiv = document.createElement('div');
var opControl = new OpControl(opacityControlDiv, map);
opacityControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_LEFT].push(opacityControlDiv);
map.data.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/google.json');
// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
document.getElementById('info-box').textContent =
event.feature.getProperty('ascii');
});
}

/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>

Answer 1

一个选项，将当前不透明度的值保留在变量中，递增(或在单击按钮时递减它(。

google.maps.event.addDomListener(OpacityPbutton, 'click', function() {
opacity += opacityInc;
if (opacity >= 0.9) opacityInc = -opacityInc;
if (opacity <= 0.009999) opacityInc = -opacityInc;
document.getElementById('opacity').innerHTML = opacity;
map.data.setStyle({fillOpacity: opacity});
});

概念验证小提琴

代码片段：

var map;
var opacity = 0.1;
var opacityInc = 0.1;
function OpControl(controlDiv, map) {
controlDiv.style.padding = '5px';
// Set CSS for the control wrapper
var controlWrapper = document.createElement('div');
controlWrapper.style.backgroundColor = 'white';
controlWrapper.style.borderStyle = 'solid';
controlWrapper.style.borderColor = 'gray';
controlWrapper.style.borderWidth = '1px';
controlWrapper.style.cursor = 'pointer';
controlWrapper.style.textAlign = 'center';
controlWrapper.style.width = '32px';
controlWrapper.style.height = '32px';
controlDiv.appendChild(controlWrapper);
// Set CSS for the Opacity Plus
var OpacityPbutton = document.createElement('div');
OpacityPbutton.style.width = '32px';
OpacityPbutton.style.height = '32px';
OpacityPbutton.style.backgroundImage = 'url("http://placehold.it/32/00ff00")';
controlWrapper.appendChild(OpacityPbutton);
// Setup the click event listener - Opacity plus
google.maps.event.addDomListener(OpacityPbutton, 'click', function() {
// map.setZoom(map.getZoom() + 1);
opacity += opacityInc;
if (opacity >= 0.9) opacityInc = -opacityInc;
if (opacity <= 0.009999) opacityInc = -opacityInc;
document.getElementById('opacity').innerHTML = opacity;
map.data.setStyle({
fillOpacity: opacity
});
});
}
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
disableDefaultUI: true,
center: {
lat: -33.865143,
lng: 151.209900
}
});
var opacityControlDiv = document.createElement('div');
var opControl = new OpControl(opacityControlDiv, map);
opacityControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_LEFT].push(opacityControlDiv);
map.data.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/google.json');
// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
document.getElementById('info-box').textContent =
event.feature.getProperty('ascii');
});
}

/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}

<div id="opacity"></div>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>