Google 地图实施问题和 API 前缀错误

Question

！！更新了!!

我在让 google 地图正确显示时遇到了一些问题，而且我在控制台日志中收到了这个错误。我已尝试调整示例 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

这是我认为错误代码所在的地方；

    // 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

注：我已经从 google 生成并包含了一个 API 密钥，但是因为我在运行本地；我已将其注释掉并在其位置添加了以下内容。我尝试添加另一个答案中提到的 API 的发布版本。

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

完整代码块

为了涵盖所有基础，我添加了我为 google 地图准备的代码块。如果有人可以浏览它并确保我没有犯菜鸟错误，我将不胜感激，有时第二只眼睛就是解决方案。

    <!-- 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 - Chrome 51.0.2704.103

Answer 1

我将尝试按照问题中提到的顺序回答每一点，并以一个工作示例作为结尾。

您遇到的第一个警告是 Prefixed Fullscreen API is deprecated。

浏览器供应商有时会为实验性或非标准添加前缀 API，以便开发人员可以试验它们，但浏览器行为的变化不会在标准过程中破坏代码。例如，想象一个函数 getExperimentalFeature。在某些浏览器中，您可以使用 getExperimentalFeature(); 本机调用它，但某些浏览器可以决定为其添加前缀，因此您必须在使用 Webkit 引擎的 Chrome 中使用 webkitGetExperimentalFeature(); , 在 Microsoft IE 中你将需要使用 msGetExperimentalFeature();, 等等

在您的代码中，您需要根据浏览器使用正确的函数调用。这就是全屏 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 本身正在使用全屏 API 而未测试无前缀版本。幸运的是，这只是一个警告，而不是 javascript 错误，因此您可以忽略它，直到 Google 解决问题。

要添加有关全屏的更多信息 API，在您的代码中，您似乎试图自动触发全屏模式。这是不可能的，出于安全原因，您不能使用全屏 API 强制网站以全屏模式显示。使用全屏 API 的唯一方法是仅当用户决定使用用户交互（例如，单击按钮）时才启用它。

如果您尝试强制进入全屏模式，您将收到以下预期错误：

Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture.

您可以在中找到有关此事的更多信息。

您的下一个错误是 TypeError: google is undefined p-apollo:32:5。它来自您的第一行代码：

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

你想说 "when the map is loaded, execute my init function"。浏览器会尽快执行此代码，但此时，您使用 <script> 标签加载的远程 Google API 甚至没有加载。所以此时的对象google是没有定义的。在 Google API 完全加载之前，您不能使用它。为避免此错误，您用来加载 API 的 url 接受一个 callback 参数，您可以使用该参数表示："When the API is loaded, execute this function"。例如，在下面的 URL 中，我将您的 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 并且与您所说的有关：

I have generated and included an API key from google, however as I'm running locally; I have commented this out and added the following in it's place.

即使您在本地运行，您也需要指定您的 API 密钥。如 the documentation regarding authentication 中所述，所有 Google 地图 JavaScript API 应用程序都需要身份验证。

如果您没有 API 键，您需要转到 Google API Console，创建或 select 一个项目并启用 API 和任何相关服务。当你有你的 API 密钥时，你可以将它包含在你用来加载 API 的 URL 中，并带有 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>

Google 地图实施问题和 API 前缀错误

Google Maps Implementation Issue & API Prefix Error

javascript

api

maps