谷歌地图V3.png地面覆盖不透明度

我创建了我的第一个带有png叠加层的Google Map API（感谢@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>

问题

解决了！

声明 var MyOptions 后，添加

 var overlayOpts = {
      opacity:0.3
  }

然后调用中的变量。GroundOverlay 调用，在调用 ImageBounds 后直接调用

即

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

然后，在每个

.groundoverlay 调用中使用相同的调用，假设您希望每个覆盖使用相同的不透明度设置。如果没有，请贴上另一个 var 并调用它。

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

希望这可以帮助某人避免我花 3 天寻找此解决方案！

这

在我的情况下解决了同样的问题 - http://www.usnaviguide.com/v3maps/ProjectedOverlayTest.htm

使用代码中的库（http://www.usnaviguide.com/v3maps/js/ProjectedOverlay.js），您可以通过overlay.setOpacity()轻松更改透明度

相关内容

最新更新

热门标签：