谷歌地圖實施問題＆API前綴錯誤

Question

!!更新 ！！

我有一點麻煩讓我的谷歌地圖顯示正確，我在控制檯日誌中得到這個錯誤。我已經嘗試調整示例中列出的前綴here。不過，我覺得我仍然沒有正確理解這一點。任何人都可以用我的語言來解釋這個嗎？

1 - Prefixed Fullscreen API is deprecated. Please use unprefixed API for fullscreen. For more help https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

這是我相信errornous代碼;

// Google Map Element 
    var mapElement = document.getElementById('map'); 

    // I added thes lines to try and solve the prefix error. 
    if (mapElement.requestFullscreen) { 
     mapElement.requestFullscreen(); 
    } 

編輯：

好了，所以有點麻煩已經變成了一對夫婦的試驗和錯誤的天。我嘗試了許多不同的方法來解決這個問題，但我不認爲我很滿意，不會犯錯。

只是爲了更新我的錯誤日誌;

1 - TypeError: google is undefined p-apollo:32:5

2 - Prefixed Fullscreen API is deprecated. Please use unprefixed API for fullscreen. For more help https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API controls.js:23:54

3 - "Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error" js:32:350

4 - "Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys" util.js:222:12

5 - "Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required" util.js:222:12

注： 我已經生成並inclu從谷歌代理API密鑰，但因爲我在本地運行;我已經評論了這一點，並在其中添加了以下內容。我嘗試添加另一個答案中提到的API的發佈版本。

<!-- Google Maps API --> 
    <script language="javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&v=3"></script> 

全碼組塊

只是爲了掩飾我所添加的代碼塊我在的地方我的谷歌地圖的基礎。如果有人可以請掃描一下，並確保我沒有發生noob錯誤，我將不勝感激，有時第二組眼睛是解決方案。

<!-- Google Maps Script --> 
    <script type="text/javascript"> 

    // create google map on doc load 
    google.maps.event.addDomListener(window, 'load', init); 

    function init() { 

     var mapOptions = { 
      zoom: 11, 
      // The latitude and longitude to center the map (always required) 
      center: new google.maps.LatLng(40.6700, -73.9400), 

      styles: [{ 
       "featureType": "landscape", 
       "stylers": [{ 
        "hue": "#FFBB00" 
       }, { 
        "saturation": 43.400000000000006 
       }, { 
        "lightness": 37.599999999999994 
       }, { 
        "gamma": 1 
       }] 
      }, { 
       "featureType": "road.highway", 
       "stylers": [{ 
        "hue": "#FFC200" 
       }, { 
        "saturation": -61.8 
       }, { 
        "lightness": 45.599999999999994 
       }, { 
        "gamma": 1 
       }] 
      }, { 
       "featureType": "road.arterial", 
       "stylers": [{ 
        "hue": "#FF0300" 
       }, { 
        "saturation": -100 
       }, { 
        "lightness": 51.19999999999999 
       }, { 
        "gamma": 1 
       }] 
      }, { 
       "featureType": "road.local", 
       "stylers": [{ 
        "hue": "#FF0300" 
       }, { 
        "saturation": -100 
       }, { 
        "lightness": 52 
       }, { 
        "gamma": 1 
       }] 
      }, { 
       "featureType": "water", 
       "stylers": [{ 
        "hue": "#0078FF" 
       }, { 
        "saturation": -13.200000000000003 
       }, { 
        "lightness": 2.4000000000000057 
       }, { 
        "gamma": 1 
       }] 
      }, { 
       "featureType": "poi", 
       "stylers": [{ 
        "hue": "#00FF6A" 
       }, { 
        "saturation": -1.0989010989011234 
       }, { 
        "lightness": 11.200000000000017 
       }, { 
        "gamma": 1 
       }] 
      }] 
     }; 

     // Google Map Element 
     var mapElement = document.getElementById('map'); 
      if (mapElement.requestFullscreen) { 
       mapElement.requestFullscreen(); 
      } 

     var map = new google.maps.Map(mapElement, mapOptions); 

     // Map Marker 
     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(40.6700, -73.9400), 
      map: map, 
      title: 'title' 
     }); 
    } 
    </script> 

測試了： - 火狐47.0 - 鉻51.0.2704.103

Answer 1

我要去嘗試回答他們在問題中提到的順序每一個點和一個總結工作示例。您的第一個警告是Prefixed Fullscreen API is deprecated。

瀏覽器供應商有時會向實驗或非標準API添加前綴，以便開發人員可以嘗試使用它們，但瀏覽器行爲的更改不會在標準過程中破壞代碼。例如，想象一個功能getExperimentalFeature。在某些瀏覽器中，您可以使用getExperimentalFeature();進行本地調用，但某些瀏覽器可以決定將其作爲前綴，因此您必須在Chrome中使用webkitGetExperimentalFeature();，而在Microsoft IE中，您需要使用msGetExperimentalFeature();等。

在您的代碼中，您需要根據瀏覽器使用正確的函數調用。這就是Fullscreen API的情況，並在this table中描述過。在某些瀏覽器中，您需要使用requestFullscreen()，但在Webkit瀏覽器中，您需要使用webkitRequestFullscreen()。

因此，如果我們把你的代碼，並把它放在一個函數，唯一的目標，在全屏模式進入，我們會使用類似：

function enterFullscreen() { 
    var element = document.documentElement; 

    if (element.requestFullscreen) { 
    element.requestFullscreen(); 
    } else if (element.msRequestFullscreen) { 
    element.msRequestFullscreen(); 
    } else if (element.mozRequestFullScreen) { 
    element.mozRequestFullScreen(); 
    } else if (element.webkitRequestFullscreen) { 
    element.webkitRequestFullscreen(); 
    } 
} 

我們通過檢查，我們可以使用啓動如果沒有前綴的方法，我們繼續測試每個可用的前綴，直到找到我們可以使用的前綴。

不幸的是，警告不會在Firefox等瀏覽器中消失。他的control.js文件中的Google API本身正在使用Fullscreen API，而未測試前綴版本。幸運的是，它只是一個警告，而不是一個JavaScript錯誤，所以你可以忽略它，直到谷歌解決這個問題。

要添加更多關於Fullscreen API的信息，請在您的代碼中看起來您嘗試自動觸發全屏模式。這是不可能的，出於安全原因，您無法強制使用Fullscreen API以全屏模式顯示網站。使用Fullscreen API的唯一方法是僅在用戶使用用戶交互來決定它時啓用它，例如，單擊按鈕。

如果你試圖強行全屏模式，你會得到下面的錯誤預計：

無法執行「requestFullScreen」上「元素」：API只能由用戶姿勢來啓動。

您可以在this question找到更多關於此事的信息。

您的下一個錯誤是TypeError: google is undefined p-apollo:32:5。它從你的第一行代碼來：

google.maps.event.addDomListener(window, 'load', init); 

你想說「被載入地圖時，執行我的初始化函數」。此代碼儘快由瀏覽器執行，但目前，您加載<script>代碼的遠程Google API甚至沒有加載。所以此時對象google未定義。完全加載之前，您無法使用Google API。爲避免此錯誤，您用來加載API的url接受一個callback參數，您可以用它來說：「當API加載時，執行此函數」。例如，在下面的網址，我定義你的init函數作爲回調時加載API來執行：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=init" type="text/javascript"></script> 

下一個錯誤是Google Maps API error: MissingKeyMapError和你說的是有關：

我已經生成幷包含來自谷歌的API密鑰，但是因爲我在本地運行;我已經評論了這一點，並在其中添加了以下內容。

即使您在本地運行，您也需要指定您的API密鑰。如the documentation regarding authentication中所述，所有Google Maps JavaScript API應用程序都需要驗證。

如果您沒有API密鑰，則需要轉到Google API Console，創建或選擇一個項目並啓用API和任何相關服務。當你有你的API密鑰，您可以將其包含在URL你使用加載使用API​​的key參數，如：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=init" type="text/javascript"></script> 

你mapOptions似乎要被罰款，在這一點上，以唯一刪除是相對於全屏模式的代碼，將其包裝在一個函數中，並僅在用戶交互後調用它，例如按鈕。

我已經提出了以下完整的工作示例，您需要更改以使其正常工作的唯一方法是將YOUR_API_KEY更改爲您的實際正確API密鑰。之後，你會得到一個地圖和一個按鈕來觸發全屏模式。

<html> 
    <head> 
    <style> 
     body { 
     margin: 0; 
     } 

     button { 
     margin: 10px; 
     } 

     #map { 
     width: 100%; 
     height: 100%; 
     } 
    </style> 
    </head> 
    <body> 

    <button id="fullscreen" onClick='enterFullscreen();'>Go fullscreen</button> 
    <div id="map"></div> 

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=init" 
    type="text/javascript"></script> 
    <script> 
     function init() { 
     var mapOptions = { 
      zoom: 11, 

      center: new google.maps.LatLng(40.6700, -73.9400), 

      styles: [{ 
       "featureType": "landscape", 
       "stylers": [{ 
        "hue": "#FFBB00" 
       }, { 
        "saturation": 43.400000000000006 
       }, { 
        "lightness": 37.599999999999994 
       }, { 
        "gamma": 1 
       }] 
      }, { 
       "featureType": "road.highway", 
       "stylers": [{ 
        "hue": "#FFC200" 
       }, { 
        "saturation": -61.8 
       }, { 
        "lightness": 45.599999999999994 
       }, { 
        "gamma": 1 
       }] 
      }, { 
       "featureType": "road.arterial", 
       "stylers": [{ 
        "hue": "#FF0300" 
       }, { 
        "saturation": -100 
       }, { 
        "lightness": 51.19999999999999 
       }, { 
        "gamma": 1 
       }] 
      }, { 
       "featureType": "road.local", 
       "stylers": [{ 
        "hue": "#FF0300" 
       }, { 
        "saturation": -100 
       }, { 
        "lightness": 52 
       }, { 
        "gamma": 1 
       }] 
      }, { 
       "featureType": "water", 
       "stylers": [{ 
        "hue": "#0078FF" 
       }, { 
        "saturation": -13.200000000000003 
       }, { 
        "lightness": 2.4000000000000057 
       }, { 
        "gamma": 1 
       }] 
      }, { 
       "featureType": "poi", 
       "stylers": [{ 
        "hue": "#00FF6A" 
       }, { 
        "saturation": -1.0989010989011234 
       }, { 
        "lightness": 11.200000000000017 
       }, { 
        "gamma": 1 
       }] 
      }] 
     }; 

     var mapElement = document.getElementById('map'); 

     var map = new google.maps.Map(mapElement, mapOptions); 

     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(40.6700, -73.9400), 
      map: map, 
      title: 'title' 
     }); 
     } 

     function enterFullscreen() { 
     var element = document.documentElement; 

     if (element.requestFullscreen) { 
      element.requestFullscreen(); 
     } else if (element.msRequestFullscreen) { 
      element.msRequestFullscreen(); 
     } else if (element.mozRequestFullScreen) { 
      element.mozRequestFullScreen(); 
     } else if (element.webkitRequestFullscreen) { 
      element.webkitRequestFullscreen(); 
     } 
     } 
    </script> 
    </body> 
</html>