google-maps-api-3 - 具有透明度的地面覆盖

Question

我有一个包含地面叠加图像的在线地图，并希望使图像半透明，以便显示底图。是否可以为此叠加层添加透明度值？

http://www.tpwd.state.tx.us/fishboat/fish/recreational/lakes/ingulf1c.phtml

这是地面覆盖的代码：

var imageBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(25.71438633861514, -98.33555959121725),
  new google.maps.LatLng(30.40813339247205, -93.57953893270167));


function initialize() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(28.0041,-96.3618),
    zoom: 7,
    mapTypeId: 'roadmap'
  });
  overlay = new google.maps.GroundOverlay(
  '/fishboat/fish/recreational/lakes/images/statemaps/gulfregion.gif',
  imageBounds);
  overlay.setMap(map);

Answer 1

GroundOverlay有一个setOpacity 方法（对我有用，值在 0 到 1.0 之间）：

var overlay = null;

function initialize() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(28.0041,-96.3618),
    zoom: 7,
    mapTypeId: 'roadmap'
  });
  overlay = new google.maps.GroundOverlay('http://www.tpwd.state.tx.us/fishboat/fish/recreational/lakes/images/statemaps/gulfregion.gif',
      imageBounds);
  overlay.setMap(map);

}

google.maps.event.addDomListener(window, 'load', initialize);

function setOpacity() {
  var opacityStr = document.getElementById('opacity').value;
  var opacity = parseFloat(opacityStr);
  overlay.setOpacity(opacity);
}

<input type="text" id="opacity" value="0.2"></input>
<input type="button" value="setOpacity" onclick="setOpacity();"></input>

工作示例-概念证明小提琴

代码片段：

var overlay = null;

function initMap() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(28.0041, -96.3618),
    zoom: 7,
    mapTypeId: 'roadmap'
  });

  var imageBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(25.71438633861514, -98.33555959121725),
    new google.maps.LatLng(30.40813339247205, -93.57953893270167));

  overlay = new google.maps.GroundOverlay(
    'http://www.tpwd.state.tx.us/fishboat/fish/recreational/lakes/images/statemaps/gulfregion.gif',
    imageBounds);
  overlay.setMap(map);
  map.fitBounds(imageBounds);
}

function setOpacity() {
  var opacityStr = document.getElementById('opacity').value;
  var opacity = parseFloat(opacityStr);
  overlay.setOpacity(opacity);
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

#map {
  width: 100%;
  height: 90%;
}

<div id="map"></div>
<input type="text" id="opacity" value="0.2" />
<input type="button" value="setOpacity" onclick="setOpacity();" />

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