5

png オーバーレイを使用して最初の Google マップ API を作成しました (@andresf の支援に感謝します)。

このマップには複数の png グラウンド オーバーレイが隣接しており、http://www.earthstation.mobi/coverage.htmで見ることができます。

質問: オーバーレイの下に地図の詳細が表示されるように、各オーバーレイに不透明度 (透明度) を設定するにはどうすればよいですか? Web ページからこれを調整する必要はありません。スクリプトにコード化されたプリセットで十分です。

上記のページのコードは次のとおりです。

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

2 に答える 2

11

問題が解決しました！

var 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 でソース コードが表示されます。

これが、私がこの解決策を探すのに費やした 3 日間を誰かが回避するのに役立つことを願っています!

于 2012-06-22T16:18:05.217 に答える
2

これは私の場合、同じ問題を解決しました - http://www.usnaviguide.com/v3maps/ProjectedOverlayTest.htm

コード内のライブラリ (http://www.usnaviguide.com/v3maps/js/ProjectedOverlay.js) を使用すると、透明度を簡単に変更できます。overlay.setOpacity()

于 2012-09-04T20:08:14.253 に答える