Google Maps InfoWindow Z-Index

因此可以說谷歌地圖有一個零指數。該元素的z索引爲100. 單擊標記可在與該元素相同的區域中顯示InfoWindow。我們如何讓這個InfoWindow懸停在元素上而不是它下面？

我曾嘗試將InfoWindow的z-Index設置爲更高的值，但這似乎沒有做任何事情。

我已經放在一起演示下面的演示問題。任何援助將不勝感激！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head> 
    <title>Infowindow Z-Index Test</title> 

    <script language="Javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>     
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>   

    <script language="Javascript" type="text/javascript"> 
     var coords = [[35.50733, 35.12768, 3]]; //, [-23.806549, 133.96059, 13], [68.169002, -134.425964, 10], [69.529715, -132.109222, 10], [80.231047, -22.730713, 7], [35.108675, -117.961578, 12]]; 
     var map;    

     function mapChoose(coords) { 
      var current = coords[Math.floor(Math.random() * (coords.length))]; 
      //mapShow(current[0], current[1], current[2], document.getElementById('map')); 
      mapShow(current[0], current[1], current[2], document.getElementById('map_canvas')); 
     }; 

     function initialize() { 

      mapChoose(coords); 
     } 

     function mapShow(lat, lng, zoom, div) { 
      var myOptions = { 
       'zoom': zoom, 
       'center': new google.maps.LatLng(lat, lng), 
       'mapTypeId': google.maps.MapTypeId.SATELLITE, 
       'disableDefaultUI': true, 
       'scrollwheel' : false, 
       'draggable': false 
      } 
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

      // markers 
      // load markers - us 
      var marker3 = new google.maps.Marker({ 
       position: new google.maps.LatLng(40.71435, -74.00597), 
       map: map, 
       icon: 'http://google-maps-icons.googlecode.com/files/kitesurfing.png', 
       draggable: true 
      }); 
      marker3.setTitle("New York");     


      // info windows     
      var contentString = $("#divContentForInfoWindow").html(); 
      $("#divContentForInfoWindow").html(''); 


      infowindow3 = new google.maps.InfoWindow({ 
       content: contentString, zIndex: 5000 // this ZIndex property doesnt appear to do anything. 
      }); 

      google.maps.event.addListener(marker3, 'click', function() { 
       infowindow3.open(map, marker3); 

      }); 

     }; 

    </script> 

</head> 


<body onload="initialize()" onunload="GUnload()"> 

    <!-- Google canvas element | Z-Index of 0 --> 
    <div id="map_canvas" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0;"></div>   


    <!-- Floating block of text | Z-Index of 100 --> 
    <div id="FloatingBlock" style='z-index: 100;position: absolute;left: 50px;top:75px;font-size: 16px;width: 525px;text-align: left;color: #111;background-color:#fff;opacity:.80;filter:alpha(opacity=80);'> 

     <b>This layer is floating above the google map because the Z-Index has been set higher. <br /></b> 

     Hello world hello world hello world hello world hello world hello world hello world<br /> 
     hello world hello world hello world hello world hello world hello world hello world<br /> 
     Hello world hello world hello world hello world hello world hello world hello world<br /> 
     hello world hello world hello world hello world hello world hello world hello world<br /> 
     Hello world hello world hello world hello world hello world hello world hello world<br /> 
     hello world hello world hello world hello world hello world hello world hello world<br /> 

     <div class="text"> 

      <!-- <input type="button" id="btntest" value="Open Info Window" onclick="showInfoWindow2();" /><input type="button" id="btntest2" value="hide Info Window" onclick="hideInfoWindow2();" />--> 
    </div> 

    <div style="clear:both;"></div> 

    </div>  
    <!--/can delete this, not used --> 

    <!-- everything IN here will appear in the google maps info window --> 
    <div id="divContentForInfoWindow">  

     This is popup content. <br />This is popup content. <br /> 
     This is popup content. <br />This is popup content. <br /> 
     This is popup content. <br />This is popup content. <br /> 
     This is popup content. <br />This is popup content. <br /> 
     This is popup content. <br />This is popup content. <br /> 
     This is popup content. <br />This is popup content. <br /> 

    </div> 
    <br /><br /><br />   
    <!--/everything in here will appear in the google maps info window --> 
</body>

來源

2012-09-07 TheLegendaryCopyCoder

你不會實際上能夠調整z-index你想要的方式。 CSS父母子女關係不會讓你失望。基本上只要地圖是一個較低的z-index，那麼浮動塊，信息窗口就永遠不會超過它。最好的辦法是嘗試[CustomOverlays]（https://developers.google.com/maps/documentation/javascript/examples/overlay-simple）或嘗試通過DOM將您的浮動div添加到地圖中 – jassok

使用infowindow.setZIndex（數量）;

來源

2015-08-26 05:40:23

不知道爲什麼這是投票。適用於我。完整的文檔在這裏：https://developers.google.com/maps/documentation/javascript/reference#InfoWindow – CHawk

有人接受這個答案！ – skwidbreth

恕我直言，當你處理地圖以外的元素時，這不起作用。每個定位元素都會設置一個新的堆棧上下文，因此'z-index'不會讓您在具有幾十個定位元素的環境中走得很遠。更好地堅持雷克西的回答。 – wortwart

您可以使用custom control而不是外部元素放置在地圖上。自定義控件位於地圖上方，當您打開InfoWindow時，Google地圖會檢測控件的位置並自動移動並在控件下方打開InfoWindow，因此兩者不會重疊。在這種情況下，最好使用它來代替custom overlay，因爲當您拖動或縮放地圖時，疊加層會移動，並且控件始終保持在同一位置。

所以，首先你要添加的地圖和控制，DIV-在你的HTML，然後初始化地圖，之後將控件添加到地圖這樣的：

var control = document.getElementById('control'); 
map.controls[google.maps.ControlPosition.TOP_LEFT].push(control);

如何簡單的是;）

來源

2016-11-29 10:14:44

Google Maps InfoWindow Z-Index

回答

相關問題