logo标签列表

谷歌地图 V3 .png 地面叠加层不透明度

google-maps-api-3mapspngopacitymask
5
我已经创建了我的第一个Google地图API，并添加了png叠加层（感谢@andresf的帮助）。
这张地图有多个相邻的png地面叠加层，可以在http://www.earthstation.mobi/coverage.htm中查看。
问题：我如何设置每个叠加层的不透明度（透明度？），以便可以在叠加层下看到地图细节？我不需要从网页调整此设置，脚本中预设的代码就足够了。
上述页面的代码如下：
 <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <title>Earthstation WIMAX Coverage</title>
 <script src="http://maps.googleapis.com/maps/api/js?key=MY_API_KEY&sensor=false"
      type="text/javascript"></script>
  <script type="text/javascript">

  function initialize() {

  var myOptions = {
            center: new google.maps.LatLng(-18.975750, 32.669184),
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.HYBRID
          };

  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  //note to self co-ords are SW and then NE
  var imageBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(-19.000417,30.999583),
    new google.maps.LatLng(-17.999583,32.000417));

  var oldmap = new google.maps.GroundOverlay(
    "http://www.earthstation.mobi/cloakpS19E031.png",imageBounds);
    oldmap.setMap(map);

    var imageBounds2 = new google.maps.LatLngBounds(
    new google.maps.LatLng(-19.000417,31.999583),
    new google.maps.LatLng(-17.999583,33.000417));

  var oldmap = new google.maps.GroundOverlay(
    "http://www.earthstation.mobi/cloakpS19E032.png",imageBounds2);
    oldmap.setMap(map);

    var imageBounds3 = new google.maps.LatLngBounds(
    new google.maps.LatLng(-20.000417,30.999583),
    new google.maps.LatLng(-18.999583,32.000417));

  var oldmap = new google.maps.GroundOverlay(
    "http://www.earthstation.mobi/cloakpS20E031.png",imageBounds3);
    oldmap.setMap(map);

 var imageBounds4 = new google.maps.LatLngBounds(
    new google.maps.LatLng(-20.000417,31.999583),
    new google.maps.LatLng(-18.999583,33.000417));

  var oldmap = new google.maps.GroundOverlay(
    "http://www.earthstation.mobi/cloakpS20E032.png",imageBounds4);
    oldmap.setMap(map); 

}

 </script>
  </head>
  <body onload="initialize()">
  <div id="map_canvas" style="width: 1000px; height: 600px"></div>
  </body>
  </html>
可能是[透明地面叠加]的重复问题(https://dev59.com/o3rZa4cB1Zd3GeqP1FIX)。 - geocodezip
2个回答
11

问题已解决！

在声明变量 MyOptions 后，添加以下内容：

 var overlayOpts = {
      opacity:0.3
  }

在调用ImageBounds之后，直接在.GroundOverlay调用中调用该变量。

例如：

var oldmap = new google.maps.GroundOverlay(
"http://www.earthstation.mobi/cloakpS19E031.png",imageBounds, overlayOpts);
oldmap.setMap(map);

在每个.groundoverlay调用中都使用相同的代码，假设你想为每个叠加层使用相同的不透明度设置。如果不是，请声明另一个变量并调用它。

完成产品可以在http://www.eartshtation.mobi/coverage.htm中看到 - 在Firefox中，按下Ctrl+U将显示源代码。

希望这可以帮助有人避免我花费三天时间搜索这个解决方案！

绝对帮助我避免了繁琐的搜索！谢谢你！ - DeathByTensors
2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接