Google Map V3 .png groundoverlay opacité

J'ai créé ma première API Google Map avec png superpositions (merci à @andresf pour de l'aide).

Cette carte a de multiples png superpositions terrestres adjacents les uns aux autres et peut être vu à http://www.earthstation.mobi/coverage.htm

Question: Comment puis-je régler l'opacité (transparence?) sur chacun d'eux afin que je puisse voir le détail de la carte sous la superposition? Je n'ai pas besoin d'ajuster ce de la page web, un préréglage de code dans le script suffira.

Le code de la page indiquée ci-dessus est:

 <!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>
Double Possible de Terrain de Superposition avec la Transparence

OriginalL'auteur Earthstation - Brian | 2012-06-21

  1. 10

    Problème résolu!

    Après la déclaration du var MyOptions, ajouter

     var overlayOpts = {
      opacity:0.3
  }

    Puis d'appeler la variable dans le .GroundOverlay appel, directement après l'appel de ImageBounds

    c'est à dire

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

    Ce même appel est ensuite utilisé dans chaque .groundoverlay appel, en supposant que vous voulez le même réglage de l'opacité de chaque superposition. Si non, decalre un autre var et l'appeler.

    Produit fini peut être vu http://www.eartshtation.mobi/coverage.htm - Dans Firefox, Ctrl U va vous montrer le code source.

    Espère que cela aide quelqu'un à éviter les 3 jours, j'ai passé la recherche de cette solution!

    M'a vraiment aidé à éviter une recherche laborieuse! Merci pour celui-ci!

    OriginalL'auteur Earthstation - Brian

  2. 2

    cela a résolu le même problème dans mon cas - http://www.usnaviguide.com/v3maps/ProjectedOverlayTest.htm

    Avec la bibliothèque (http://www.usnaviguide.com/v3maps/js/ProjectedOverlay.js) à l'intérieur du code, vous pouvez facilement changer la transparence par overlay.setOpacity()

    OriginalL'auteur Eidam