Question

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

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

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

请查看JSFiddle

代码段

＆＃13;

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');
  });

}

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

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});
});

proof of concept fiddle

代码段

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>

来自外部按钮

1 个答案: