- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
!!更新 !!
我在让我的谷歌地图正确显示时遇到了一点麻烦,并且我在控制台日志中收到了这个错误。我已尝试调整示例 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 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>
最佳答案
我将尝试按照问题中提到的顺序回答每个要点,并以一个工作示例结束。
您遇到的第一个警告是 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();
}
}
control.js
中的 Google API 本身文件正在使用全屏 API 而不测试无前缀版本。幸运的是,这只是一个警告而不是 javascript 错误,因此您可以忽略它,直到 Google 解决问题。
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);
<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.
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/
这里的这个问题对 updating Google Sheets charts linked to Google slides 有一个简洁的解决方案. function onOpen() { var
我正在尝试将 Google 表单添加到 Google 类作业中,但似乎不可能。 首先,它在这里 ( https://developers.google.com/classroom/reference/
出于某种原因,无论我做什么以及我如何尝试,这个日期格式化程序都不起作用。工具提示仍然显示错误的格式。你可以试试代码here . 在代码中我必须注释掉 formatter.format(dataTabl
我目前正在使用访问 token 和刷新 token 从 Google Analytics Reporting API (v4) 中提取数据。当我致力于自动从 Google Analytics 中提取数
我已在 Google 云端硬盘中创建了一个文件夹,例如测试一下,放入3个文件 a.jpg, b.jpg, c.jpg 我希望在同一帐户下的 Google 电子表格中访问文件,例如生成图像文件的链接,可
电子表格 A 是欢迎新移民来到我们小镇的团队的主数据源。它里面有大量非常敏感的数据,不能公开,哪怕是一点点。 (我们谈论的是 child 的姓名和出生日期以及他们在哪里上学……保证电子表格 A 的安全
有没有办法在 Google 文档中编写 Google Apps 脚本以从 Google 表格中检索仅限于非空白行的范围并将这些行显示为表格? 我正在寻找一个脚本,用于使用 Google Apps 脚本
有没有办法在 Google 文档中编写 Google Apps 脚本以从 Google 表格中检索仅限于非空白行的范围并将这些行显示为表格? 我正在寻找一个脚本,用于使用 Google Apps 脚本
尝试检索存储在 google firebase 中名为条目的节点下的表单条目,并使用谷歌工作表中的脚本编辑器附加到谷歌工作表。 我已将 FirebaseApp 库添加到谷歌表脚本编辑器。然后我的代码看
是否可以将我的 Web 应用程序的登录限制为仅限 google 组中的帐户? 我不希望每个人都可以使用他们的私有(private) gmail 登录,而只能使用我的 google 组中的用户。 最佳答
我们想使用 Google 自定义搜索实现 Google 附加链接搜索框。在谷歌 documentation , 我发现我们需要包含以下代码来启用附加链接搜索框 { "@context"
我想将特定搜索词的 Google 趋势图表添加到我的 Google Data Studio 报告中,但趋势不是数据源列表中的选项。我也找不到嵌入 JavaScript 的选项。是否可以将趋势图表添加到
是否可以将文件从 Google Drive 复制到 Google Cloud Storage?我想它会非常快,因为两者都在类似的存储系统上。 我还没有看到有关无缝执行此操作的任何方法的任何信息,而无需
之间有什么区别 ga('send', 'pageview', { 'dimension1': 'data goes here' }); 和 ga('set', 'dimension1', 'da
我正在尝试记录每个博客站点作者的点击率。 ga('send', 'pageview'); (in the header with the ga code to track each page) ga(
我设置了 Google Tag Manager 和 2 个数据层变量:一个用于跟踪用户 ID,传递给 Google Analytics 以同步用户 session ,另一个用于跟踪访问者类型。 在使用
我在我们的网站上遇到多个职位发布的问题。 我们在加拿大多个地点提供工作机会。所有职位页面都包含一个“LD+JSON ”职位发布的结构化数据,基于 Google 的职位发布文档: https://dev
公司未使用 Google 套件,使用个人(消费者)帐户(甚至是 Google 帐户)违反公司政策。 需要访问 Google Analytics - 没有 Google 帐户是否可能? 谢谢 最佳答案
我想分析人们使用哪些搜索关键字在 Play 商店中找到我的应用。 那可能吗?我怎么能这样做? 最佳答案 自 2013 年 10 月起,您可以关联您的 Google Analytics(分析)和 Goo
Google Now 和 Google Keep 中基于时间和位置的提醒与 Google Calendar 事件提醒不同。是否有公共(public) API 可以访问 Now 和 Keep 中的这些事
我是一名优秀的程序员,十分优秀!