圖像在Google地圖全屏顯示中消失

Question

我有一個徽標出現在地圖的右下角，靠近控件。問題是當選擇全屏選項時，徽標消失。 div（aggdata-info）似乎在那裏，當我看着它在螢火蟲但圖像/標誌不可見。有任何想法嗎？

initMap : function() { 
 
\t \t \t var me = this; 
 

 
\t \t \t me.map.mapOptions = { 
 
\t \t \t \t \t zoom : 4, 
 
\t \t \t \t \t center : { 
 
\t \t \t \t \t \t lat: 37.6, 
 
\t \t \t \t \t \t lng: -95.665 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t mapTypeControlOptions : { 
 
\t \t \t \t \t \t mapTypeIds : [ 
 
\t \t \t \t \t \t \t //'map_style', 
 
\t \t \t \t \t \t \t google.maps.MapTypeId.ROADMAP, 
 
\t \t \t \t \t \t \t google.maps.MapTypeId.TERRAIN, 
 
\t \t \t \t \t \t \t google.maps.MapTypeId.SATELLITE, 
 
\t \t \t \t \t \t \t google.maps.MapTypeId.HYBRID 
 
\t \t \t \t \t \t ] 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t //mapTypeId : 'map_style', 
 
\t \t \t \t \t 
 
\t \t \t \t \t zoomControl : true, 
 
\t \t \t \t \t mapTypeControl : true, 
 
\t \t \t \t \t scaleControl : false, 
 
\t \t \t \t \t streetViewControl : true, 
 
\t \t \t \t \t rotateControl : true, 
 
\t \t \t \t \t fullscreenControl : true, 
 
\t \t \t \t \t fullscreenControlOptions : { 
 
\t \t \t \t \t \t position : google.maps.ControlPosition.RIGHT_BOTTOM 
 
\t \t \t \t \t } 
 
\t \t \t \t \t 
 
\t \t \t \t };

div.aggdata-info { 
 
\t height: 38px; 
 
\t width: 170px; 
 
\t text-align: center; 
 
    line-height: 28px; 
 
\t background: #fff url(../cmnimages/reit_common/data_by_aggdata.png) center center no-repeat; 
 
\t box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); 
 
\t font-size: 12px; 
 
\t position: absolute; 
 
    margin-top: 493px; 
 
    margin-left: 832px; 
 
    padding: 0px 5px 0px 5px; 
 
}

Standard size with logo included Full screen logo disappears

下面是該分區的CSS。

Answer 1

請按照我的代碼和對不起，我從來沒有使用過你的代碼！我做了我的代碼中的所有更改。

注：InvalidKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error：在您需要添加您的谷歌API密鑰否則谷歌地圖顯示以下錯誤：

谷歌地圖API錯誤文件我已經包含js文件。

使用此disableDefaultUI: true我只是隱藏在谷歌地圖對象，它也可能隱藏谷歌地圖中的特定對象。

如果你想使用編輯你的代碼，然後這下面的代碼。

var customControlDiv = document.createElement('div'); 
var customControl = new CustomControl(customControlDiv, map); 
customControlDiv.index = 1; 

和功能

function CustomControl(controlDiv, map) { 
      var tempBackgroundImage = "http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red-md.png"; 
      controlDiv.style.padding = '5px'; 
      controlDiv.style.right = '5px'; 
      var myLocationControlDiv = document.createElement('DIV'); 

      var controlUI = document.createElement('DIV'); 
      controlUI.style.cursor = 'pointer'; 
      controlUI.style.background = "url(" + tempBackgroundImage + ") 68px 78px"; 
      controlUI.style.height = '68px'; 
      controlUI.style.width = '68px'; 
      controlUI.style.right = '15px'; 
      controlUI.style.bottom = '50px'; 
      controlUI.style.backgroundSize= '68px 78px'; 
      controlUI.title = 'Current location'; 

      myLocationControlDiv.appendChild(controlUI); 
      map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlUI); 

    } 

這就是它！

如果您不使用代碼，則可以使用下面的整個代碼。

的Html

var map; 
 
     function initMap() { 
 
     map = new google.maps.Map(document.getElementById('map'), { 
 
      center: {lat: -34.397, lng: 150.644}, 
 
      zoom: 8, 
 
      disableDefaultUI: true 
 
     }); 
 
     var customControlDiv = document.createElement('div'); 
 
     var customControl = new CustomControl(customControlDiv, map); 
 

 
     customControlDiv.index = 1; 
 
     } 
 
     function CustomControl(controlDiv, map) { 
 
\t \t \t var tempBackgroundImage = "http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red-md.png"; 
 
\t \t \t controlDiv.style.padding = '5px'; 
 
\t \t \t controlDiv.style.right = '5px'; 
 
\t \t \t var myLocationControlDiv = document.createElement('DIV'); 
 

 
\t \t \t var controlUI = document.createElement('DIV'); 
 
\t \t \t controlUI.style.cursor = 'pointer'; 
 
\t \t \t controlUI.style.background = "url(" + tempBackgroundImage + ") 68px 78px"; 
 
\t \t \t controlUI.style.height = '68px'; 
 
\t \t \t controlUI.style.width = '68px'; 
 
\t \t \t controlUI.style.right = '15px'; 
 
\t \t \t controlUI.style.bottom = '50px'; 
 
\t \t \t controlUI.style.backgroundSize= '68px 78px'; 
 
\t \t \t controlUI.title = 'Current location'; 
 

 
\t \t \t myLocationControlDiv.appendChild(controlUI); 
 
\t \t \t map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlUI); 
 

 
\t }

/* Always set the map height explicitly to define the size of the div 
 
     * element that contains the map. */ 
 
     #map { 
 
     height: 100%; 
 
     } 
 
     /* Optional: Makes the sample page fill the window. */ 
 
     html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     }

<script src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}&callback=initMap" 
 
    async defer></script> 
 
<div id="map"></div>

重要的東西：

根據圖像的大小，請更新以下值。

controlUI.style.height = '68px'; 
controlUI.style.width = '68px'; 
controlUI.style.backgroundSize= '68px 78px';