2012-06-20 181 views
1

我花了兩天困惑這個,並失敗了。任何援助將不勝感激。谷歌地圖v3地面覆蓋?

我需要一個以-18.975750,32.669184爲中心的地圖,在1500px x 900px的畫布上。然後我需要使用設置的代碼透明度覆蓋覆蓋PNG(從www.heywhatsthat.com獲得)。

我終於到了下面的代碼,它失敗了。我想添加一個以上的PNG,但它甚至不能讓一個人工作。

<script src="http://maps.google.com/maps?file=api&amp;v=3&amp;key=AIzaSyAGbZjXr2wr7dT2P3O5pNo5wvVF3JiaopU&sensor=false" 
     type="text/javascript"></script> 
<script type="text/javascript"> 

function initialize() { 
    if (GBrowserIsCompatible()) { 
    var map = new google.maps.MAP(document.getElementById("map_canvas")); 
    map.setCenter(new GLatLng(-18.975750, 32.669184), 13); 
    map.setUIToDefault(); 

    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); 
} 

</script> 
</head> 
<body onload="initialize()" onunload="GUnload()"> 
<div id="map_canvas" style="width: 1500px; height: 900px"></div> 
</body> 
</html> 

我在想什麼,請指點我正確的方向在選項中添加透明度的多個PNG疊加。

感謝 布賴恩 津巴布韋

+0

你可能不想發佈你的密鑰......只是一個提示...... – roberthuttinger

回答

2

你有很多的問題與您的代碼。看起來你正試圖從V2遷移到V3,並且你的代碼中仍然有V2方法和對象。當您調用HTML時,您還沒有正確加載JS APi。

下面是使用V3 API顯示覆蓋圖的功能代碼,但它看起來像您使用的原始中心座標不會將地圖放置在覆蓋圖的中心(您需要自己弄清楚) 。我在相關的地方添加了評論,以便您可以看到你誤入歧途的地方。請注意第一個腳本標記中對API庫的調用。

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAGbZjXr2wr7dT2P3O5pNo5wvVF3JiaopU&sensor=false" 
      type="text/javascript"></script> 
    <script type="text/javascript"> 

    function initialize() { 
    //You don't need to use GBrowserIsCompatible, it's only for V2 of the API 
    //if (GBrowserIsCompatible()) { 
     //You need to set up options for the map that you reference when you 
     //instantiate the map object 
     var myOptions = { 
       center: new google.maps.LatLng(-18.975750, 32.669184), 
       zoom: 13, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
     //Your code references google.maps.MAP; it's google.maps.Map 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

     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); 
    //} <--Your code was missing this closing bracket for the conditional 
     //But the conditional is not even needed, since GBrowserCompatible is a V2 thing 
    } 

    </script> 
    </head> 
    <body onload="initialize()"> 
    <div id="map_canvas" style="width: 1500px; height: 900px"></div> 
    </body> 
    </html> 
+0

@ andresf非常感謝,工作的一種享受! 還有兩個問題。在疊加層上設置透明度並在同一個地圖上添加更多疊加層。 我已經加載另一個覆蓋網絡服務器。圖片名稱(在相同的網址)是cloakpS19E032.png 這將是地圖中心的覆蓋圖,有大量的覆蓋圖添加到無線網絡覆蓋區域,大約500平方公里。 的束縛,這第二個覆蓋從KML文件共同ORDS是 -17.999583 \t \t \t \t -19.000417 \t \t \t \t 33.000417 \t \t \t \t 31.999583 再次感謝 Brian –

+0

您可能希望將這些問題作爲其他問題提出來,或者研究Stack Overflow以查看它們是否曾被問過。你也可能想表明我正確回答了你的問題。 – andresf