將透明bg放置在另一個地圖上

我正在尋找將另一個地圖放在另一個地圖上，這樣我就可以製作一張「衛星視圖」地圖，而不會影響道路和標籤的顏色。我希望它看起來像這樣： http://pixfx.at/#Map 將透明bg放置在另一個地圖上

所以我把他們的一些代碼，並使它看起來像這樣：

<style type="text/css"> 
#map { 
height:543px !important; 
background-image:url(../images/background_gradient_transparent.png); 
background-repeat:repeat-x; 
border-top:1px solid #cccccc; 
border-bottom:1px solid #666666; 
margin:5px 0px 5px 0px; 
overflow:hidden !important; 
} 

#map_canvas { 
height:543px !important; 
background-color:transparent !important; 
overflow:hidden !important; 
} 

#map_canvas .terms-of-use-link { 
display:none; 
} 

</style> 




<script type="text/javascript"> 



    var map = new GMap2(document.getElementById("map_canvas")); 

    map.setCenter(new GLatLng(47.254072, 11.445657), 13); 

    map.setMapType(G_HYBRID_MAP); 
    /* 
    map.removeMapType(G_NORMAL_MAP); 
    map.removeMapType(G_HYBRID_MAP); 
    map.removeMapType(G_SATELLITE_MAP); 
    map.removeMapType(G_PHYSICAL_MAP); 
    */ 
    //map.getDragObject().setDraggableCursor("move"); 
    map.enableDoubleClickZoom(); 
    map.enableContinuousZoom(); 
    map.enableScrollWheelZoom(); 
    map.enableDragging(); 

    } 

    function loadScript() { 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize"; 
    document.body.appendChild(script); 




    jQuery('#map_canvas > div > div > div > div').each(function() { 

     if(jQuery(this).css('zIndex') == '0') 
     { 
      jQuery(this).find('img').each(function() { 
       jQuery(this).css({ opacity: '0.25' }); 
      }); 
     } 

    }); 

    jQuery('#map_canvas > .gmnoprint').css({ display: 'none' }); 


      } 

      window.onload = loadScript; 
      </script> 

      </head> 



      <body> 



      <div id="map"> 
      <div id="map_canvas" style="width:100%; height:100%;"></div> 
      </div>

雖然問題是，地圖不顯示。

來源

2011-07-12 pufAmuf

您提供的代碼無效。

map.enableDragging(); 

} //<-- this bracket is unmatched 

function loadScript() {

此外，這條專線：var map = new GMap2(document.getElementById("map_canvas")); 使用未知的項目。錯誤的API使用/缺少鏈接？

至於你的CSS，爲這兩個畫布使用自定義圖片，我看到#map_canvas已經正確地結束了#map。

你的問題在於你的javascript：你沒有正確使用google map API。我有點改變了你的代碼，但尚未定義的GMap2 ...

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&callback=initialize"></script> 
<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     var map = new GMap2(document.getElementById("map_canvas")); 
     map.setCenter(new GLatLng(47.254072, 11.445657), 13); 
     map.setMapType(G_HYBRID_MAP); 
     map.enableDoubleClickZoom(); 
     map.enableContinuousZoom(); 
     map.enableScrollWheelZoom(); 
     map.enableDragging(); 

     jQuery('#map_canvas > div > div > div > div').each(function() { 
      if(jQuery(this).css('zIndex') == '0') 
      { 
       jQuery(this).find('img').each(function() { 
        jQuery(this).css({ opacity: '0.25' }); 
       }); 
      } 
     }); 
     jQuery('#map_canvas > .gmnoprint').css({ display: 'none' }); 
    }); 
      </script>

由於谷歌地圖API v2是棄用你應該切換到第3版。

此外，您還需要Sign up for a Google Maps API key。否則Google會阻止你。

轉到here並按照說明操作。 :)

來源

2011-07-12 13:57:44 Kraz

啊啊謝謝！我絕對想把它移植到v3。如果我在v3中這樣做，我會如何將其放在另一個上面？我必須創建2個地圖（var map1，map2）嗎？ – pufAmuf

不知道，但可能（然後修改頂部的不透明度），祝你好運！ – Kraz

@pafAmuf我認爲設置在下面一行'map.setMapType（G_HYBRID_MAP）'中的混合地圖類型將爲你*（把一個地圖放在另一個地圖上）*做詭計。我想在V3中會有類似的東西。但是這可能意味着如果Google地圖HTML佈局在V2之後發生了變化，您將不得不調整JQuery代碼。 –

將透明bg放置在另一個地圖上

回答

相關問題