1. 首頁
  2. 問答
  3. Google地圖V3.png地面覆蓋不透明

Google地圖V3.png地面覆蓋不透明

2012-06-21 88 views
4

我用png疊加層創建了我的第一個Google Map API（感謝@andresf的幫助）。Google地圖V3.png地面覆蓋不透明

這個地圖有彼此相鄰的多個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=AIzaSyAGbZjXr2wr7dT2P3O5pNo5wvVF3JiaopU&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>

感謝預期 布賴恩 津巴布韋

來源

2012-06-21 Earthstation - Brian

回答

10

問題解決了！

宣佈了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調用中，假設您想爲每個疊加層設置相同的不透明度設置。如果不是，則打印另一個變體並調用它。可以看到成品http://www.eartshtation.mobi/coverage.htm - 在Firefox中，Ctrl U會顯示源代碼

希望這可以幫助有人避免我花了3天的時間搜索這個解決方案！

來源

2012-06-22 16:18:05

+0

絕對幫助我避免了費力的搜索！感謝這個！ – DeathByTensors

相關問題

 相關問題