!!更新 !!
我在让我的谷歌地图正确显示时遇到了一点麻烦，并且我在控制台日志中收到了这个错误。我已尝试调整示例 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:52 - 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:543 - "Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error" js:32:3504 - "Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys" util.js:222:125 - "Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required" util.js:222:12注:
我已经从谷歌生成并包含了一个 API key ，但是当我在本地运行时；我已经对此进行了评论，并在其位置添加了以下内容。如另一个答案中所述，我尝试添加 API 的发布版本。
<!-- Google Maps API -->
<script language="javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&v=3"></script>
完整代码块
只是为了涵盖所有基础，我为我的谷歌地图添加了代码块。如果有人可以请扫描它并确保我没有犯菜鸟错误，我将不胜感激，有时第二双眼睛是解决方案。
<!-- 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
最佳答案
我将尝试按照问题中提到的顺序回答每个要点，并以一个工作示例结束。
您遇到的第一个警告是 Prefixed Fullscreen API is deprecated .
浏览器 vendor 有时会为实验性或非标准 API 添加前缀，以便开发人员可以对其进行试验，但浏览器行为的更改不会在标准过程中破坏代码。例如，想象一个函数 getExperimentalFeature .在某些浏览器中，您可以使用 getExperimentalFeature(); 本地调用它。但是某些浏览器可以决定为其添加前缀，因此您必须使用 webkitGetExperimentalFeature();在使用 Webkit 引擎的 Chrome 中，在 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();
}
}
我们首先检查是否可以使用 not prefixed 方法，如果不能，我们继续测试每个可用的前缀，直到找到可以使用的前缀。
不幸的是，警告不会在某些浏览器(例如 Firefox)中消失。他的
control.js 中的 Google API 本身文件正在使用全屏 API 而不测试无前缀版本。幸运的是，这只是一个警告而不是 javascript 错误，因此您可以忽略它，直到 Google 解决问题。要添加有关全屏 API 的更多信息，在您的代码中，您似乎试图自动触发全屏模式。这是不可能的，出于安全原因，您不能使用 Fullscreen API 强制网站以全屏模式显示。使用全屏 API 的唯一方法是仅在用户使用用户交互(例如，单击按钮)决定它时启用它。
如果您尝试强制全屏模式，您将收到以下预期错误:
Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture.
您可以在 this question 中找到有关此问题的更多信息.
您的下一个错误是
TypeError: google is undefined p-apollo:32:5 .它来自您的第一行代码:google.maps.event.addDomListener(window, 'load', init);
您想说“加载 map 时，执行我的初始化函数”。浏览器会尽快执行此代码，但此时，您正在使用
<script> 加载您的远程 Google API标签甚至没有加载。所以对象google此时未定义。在完全加载之前，您无法使用 Google API。为避免此错误，您用于加载 API 的 url 接受 callback可以用来表示的参数:“加载 API 时，执行此函数”。例如，在以下 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 key 。如 the documentation regarding authentication 中所述，所有 Google Maps JavaScript API 应用程序都需要身份验证。
如果您没有 API key ，则需要转到 Google API Console ，创建或选择一个项目并启用 API 和任何相关服务。当您拥有 API key 后，您可以将其包含在您用来加载 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 key 。之后，您将获得一张 map 和一个按钮来触发全屏模式。<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>
关于javascript - Google map 实现问题和 API 前缀错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38457690/