如何修复以下控制台错误。1.不支持加载不带回调的GoogleMapJavaScript API1.无效值错误:不是HTMLInputElement的示例由于上述错误,我的工作没有显示在谷歌搜索结果。我不是一个开发人员,我需要建议来解决这个问题。所以,我会在我的wordpress网站纳入必要的变化。
kh212irz1#
使用Function.prototype作为noop回调函数,可以快速删 debugging 误消息。
Function.prototype
https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=Function.prototype
根据Google Maps API documentation,callback参数已经被要求了很长时间,然而实际上,Google直到最近(在过去的几天内)才开始强制执行这一要求。虽然它似乎没有打破任何东西,它现在在控制台中显示一个丑陋的错误消息...
callback
简单来说就是指定一个callback值,设置外部API库加载完成后要触发的JavaScript函数的名称。
https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=FUNCTION_NAME
注意,**你必须指定一个真正的函数名!**否则你会触发一个"不是函数"的错误消息,并且只是用一个错误消息替换另一个错误消息。
如果您实际上没有回调函数在库加载后立即运行,则可以使用Function.prototype作为noop的替代。
Function.prototype方法是JavaScript的原生方法,完全不执行任何操作......这正是您在这种情况下所需要的!有关Function.prototype的详细信息,请参见this unrelated SO thread...
lmyy7pcs2#
如果在未指定回调函数的情况下加载Google Maps JavaScript API,则会出现“不支持在未指定回调函数的情况下加载Google Maps JavaScript API”错误。要修复此错误,您需要向API的URL添加回调函数,并确保正确调用该函数。以下是您可以执行的修复错误的步骤:找到要加载Google Maps JavaScript API的script标记,它应该类似于:向URL添加回调函数,如下所示:确保在JavaScript代码中定义了一个名为“initMap”的函数,该函数将在加载Google Maps JavaScript API后调用。检查是否所有其他参数,如API密钥,库等都在URL中正确传递。最后,重新加载页面并检查错误是否已解决。同样需要注意的是,API密钥丢失或不正确,或者未在Google Cloud Console中启用Google Maps JavaScript API也可能导致错误。
blpfk2vs3#
我刚刚找到了这段yt视频,可能会对你有所帮助:https://www.youtube.com/watch?v=1asukrHEqMM&ab_channel=KnowledgeBase这对我没有多大帮助,因为我的问题略有不同,但给了我一个想法,该怎么走。希望它能帮助你。祝你好运:::::::::E D I T::::::::基本上,要消除此错误,您必须在运行进行API调用的脚本之前声明函数(又名initMap)。initMap函数是创建谷歌Map并赋予其特性的函数。initMap函数如下所示:
function initMap(): void { map = new google.maps.Map(document.getElementById("map") as HTMLElement, { center: { lat: -34.397, lng: 150.644 }, zoom: 8, }); }
API调用是放置API-KEY的脚本行。
<script defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API-KEY&libraries=places&callback=initMap"></script>
我找到了两个办法,第一个办法是:我有一个模块,您只需在API之前使用src脚本调用它。示例:
<html> <head> <script defer src="js/scripts.js" type="module"></script> <script src="js/module/google.js"></script> <script defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API-KEY&libraries=places&callback=initMap"></script> </head> <body></body> </html>
谷歌网址. js是用来保护我的initMap功能的()第二种方式是:在进行API调用之前将所有代码写入脚本标记中。示例:
<html> <head> <script defer src="js/scripts.js" type="module"></script> <script> function initMap(): void { map = new google.maps.Map(document.getElementById("map") as HTMLElement, { center: { lat: -34.397, lng: 150.644 }, zoom: 8, }); } </script> <script defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API-KEY&libraries=places&callback=initMap"></script> </head> <body></body> </html>
注意我使用了defer,所以代码在页面底部加载,这只是我的风格,因为我喜欢在head元素中声明所有内容。
3条答案
按热度按时间kh212irz1#
靶区; DR
使用
Function.prototype
作为noop回调函数,可以快速删 debugging 误消息。完整说明
根据Google Maps API documentation,
callback
参数已经被要求了很长时间,然而实际上,Google直到最近(在过去的几天内)才开始强制执行这一要求。虽然它似乎没有打破任何东西,它现在在控制台中显示一个丑陋的错误消息...
我如何修复它?
简单来说就是指定一个
callback
值,设置外部API库加载完成后要触发的JavaScript函数的名称。注意,**你必须指定一个真正的函数名!**否则你会触发一个"不是函数"的错误消息,并且只是用一个错误消息替换另一个错误消息。
但我没有/不需要回调函数!
如果您实际上没有回调函数在库加载后立即运行,则可以使用
Function.prototype
作为noop的替代。Function.prototype
方法是JavaScript的原生方法,完全不执行任何操作......这正是您在这种情况下所需要的!有关
Function.prototype
的详细信息,请参见this unrelated SO thread...lmyy7pcs2#
如果在未指定回调函数的情况下加载Google Maps JavaScript API,则会出现“不支持在未指定回调函数的情况下加载Google Maps JavaScript API”错误。要修复此错误,您需要向API的URL添加回调函数,并确保正确调用该函数。
以下是您可以执行的修复错误的步骤:
找到要加载Google Maps JavaScript API的script标记,它应该类似于:
向URL添加回调函数,如下所示:
确保在JavaScript代码中定义了一个名为“initMap”的函数,该函数将在加载Google Maps JavaScript API后调用。
检查是否所有其他参数,如API密钥,库等都在URL中正确传递。
最后,重新加载页面并检查错误是否已解决。
同样需要注意的是,API密钥丢失或不正确,或者未在Google Cloud Console中启用Google Maps JavaScript API也可能导致错误。
blpfk2vs3#
我刚刚找到了这段yt视频,可能会对你有所帮助:
https://www.youtube.com/watch?v=1asukrHEqMM&ab_channel=KnowledgeBase
这对我没有多大帮助,因为我的问题略有不同,但给了我一个想法,该怎么走。希望它能帮助你。祝你好运
:::::::::E D I T::::::::
基本上,要消除此错误,您必须在运行进行API调用的脚本之前声明函数(又名initMap)。
initMap函数是创建谷歌Map并赋予其特性的函数。
initMap函数如下所示:
API调用是放置API-KEY的脚本行。
我找到了两个办法,第一个办法是:我有一个模块,您只需在API之前使用src脚本调用它。
示例:
谷歌网址. js是用来保护我的initMap功能的()
第二种方式是:在进行API调用之前将所有代码写入脚本标记中。
示例:
注意我使用了defer,所以代码在页面底部加载,这只是我的风格,因为我喜欢在head元素中声明所有内容。