InvalidValueError：initMap不是函数吗？ [英] InvalidValueError: initMap is not a function?
本文介绍了InvalidValueError：initMap不是函数吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我无法用任何提供的答案解决此问题。为什么这仍然被投票？
我从Roots.io使用Sage主题
I已经入列了Google Maps API，如下所示：
function assets（）{
wp_enqueue_style（'sage / css'， Assets \asset_path（'styles / main.css'），false，null）;
wp_enqueue_style（'font-awesome'，'//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'，false，null）;如果（is_single（）&&; comments_open（）&& get_option（'thread_comments'））{
wp_enqueue_script（'comment-reply'）;
if
wp_enqueue_script（'sage / js'，Assets \asset_path（'scripts / main.js'），['jquery']，null，true）;
wp_enqueue_script（'jquery-validate'，'//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js'，[]，null，true）;
if（is_page_template（'template-about.php'））{
wp_enqueue_script（'google-maps'，'//maps.googleapis.com/maps/api/js?key = MY_API_KEY& callback = initMap'，[]，null，true）;
}
}
然后我在控制台中得到这个错误：
未捕获InvalidValueError：initMap不是函数... js？key = MY_API_KEY& callback = initMap：95
为了试着解决这个问题，我尝试了重新排列上面的enques，并且我也试着移动 initMap（）函数围绕我的 Main.js 。
Main.js片段：
（function（$）{
//使用此变量设置如果你
//重命名这个变量，你还需要重命名下面的命名空间
var Sage = {
//所有页面
'common'：{
init：function（）{
// JavaScript在所有页面上被触发
if（！$（'body'）。hasClass（'home'））{
$（this）.find（'。banner'）。removeClass（'navbar-fixed-top'）;
}
var map;
的console.log（达到）;
函数initMap（）{
var location = {lat：51.47672559，lng：-3.17107379};
var markerloc = {lat：51.476852，lng：-3.167869};
map = new google.maps.Map（document.getElementById（'map'），{
center：location，
scrollwheel：false，
zoom：17
}）;
var marker = new google.maps.Marker（{
position：markerloc，
map：map，
title：'Hello World！'
}）;
}
}，
我没有找到这个，所以我尝试添加
google.maps.event.addDomListener（window，'load'，initMap）;
在 initMap（）函数之前和之后。我认为这可能与范围有关，我该如何解决这个问题？
更新：定义Sage对象外的函数doesn '$ t
$ b
（函数initMap（）{
var location = {lat：51.47672559，lng： - 3.17107379};
var markerloc = {lat：51.476852，lng：-3.167869};
map = new google.maps.Map（document.getElementById（'map'），{
center：位置，
滚动：false，
zoom：17
}）;
var marker = new google.maps.Marker（{
position：markerloc，
map：map，
title：'Hello World！'
}）;
}）;
/ * ============================================ ============================
*基于DOM的路由
*基于Paul Irish的链接
*
*仅在匹配的身体类上触发。如果一个主体类包含破折号，
*将其添加到下面的对象时用下划线替换破折号。
*
* .noConflict（）
*路由被封闭在一个匿名函数中，因此，即使在.noConflict（）模式下，
*总是可以引用jQuery和$ 。
* ============================================= =========================== * /
（函数（$）{
//使用这个变量来设置通用和页面特定的函数，如果你
//重命名这个变量，你还需要重命名下面的命名空间
var Sage = {
//所有页面
'common'：{
init：function（）{
//在所有页面上触发JavaScript
if（！$（'body'）。 hasClass（'home'））{
$（this）.find（'。banner'）。removeClass（'navbar-fixed-top'）;
}
}，$ b $
解决方案
Sage 对象内的 init 函数内。 function（$）{} 函数，你可以做这样的事情来解决这个问题。
window.initMap = function（）{
var location = {lat：51.47672559，lng：-3.17107379};
var markerloc = {lat：51.476852，lng：-3.167869};
map = new google.maps.Map（document.getElementById（'map'），{
center：location，
scrollwheel：false，
zoom：17
}）;
var marker = new google.maps.Marker（{
position：markerloc，
map：map，
title：'Hello World！'
}）;
};
I was never able to resolve this issue with any of the provided answers. Why is this still down voted?
I'm using the Sage theme from Roots.io
I have enqueued the Google Maps API like so:
function assets() {
wp_enqueue_style('sage/css', Assets\asset_path('styles/main.css'), false, null);
wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css', false, null);
if (is_single() && comments_open() && get_option('thread_comments')) {
wp_enqueue_script('comment-reply');
}
wp_enqueue_script('sage/js', Assets\asset_path('scripts/main.js'), ['jquery'], null, true);
wp_enqueue_script('jquery-validate', '//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js', [], null, true);
if (is_page_template('template-about.php')) {
wp_enqueue_script('google-maps', '//maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap', [], null, true);
}
}
I then get this error in console:
Uncaught InvalidValueError: initMap is not a function ... js?key=MY_API_KEY&callback=initMap:95
To try and resolve this, I have tried re-ordering the enques above and I've also tried moving the initMap() function around my Main.js.
Main.js snippet:
(function($) {
// Use this variable to set up the common and page specific functions. If you
// rename this variable, you will also need to rename the namespace below.
var Sage = {
// All pages
'common': {
init: function() {
// JavaScript to be fired on all pages
if (!$('body').hasClass('home')) {
$(this).find('.banner').removeClass('navbar-fixed-top');
}
var map;
console.log('reached');
function initMap() {
var location = {lat: 51.47672559, lng: -3.17107379};
var markerloc = {lat: 51.476852, lng: -3.167869};
map = new google.maps.Map(document.getElementById('map'), {
center: location,
scrollwheel: false,
zoom: 17
});
var marker = new google.maps.Marker({
position: markerloc,
map: map,
title: 'Hello World!'
});
}
},
I did find this so I tried adding
google.maps.event.addDomListener(window, 'load', initMap);
before and after the initMap() function. I think it may be something to do with the scope, how can I fix this?
Update: Defining the function outside the Sage object doesn't fix this either
(function initMap() {
var location = {lat: 51.47672559, lng: -3.17107379};
var markerloc = {lat: 51.476852, lng: -3.167869};
map = new google.maps.Map(document.getElementById('map'), {
center: location,
scrollwheel: false,
zoom: 17
});
var marker = new google.maps.Marker({
position: markerloc,
map: map,
title: 'Hello World!'
});
});
/* ========================================================================
* DOM-based Routing
* Based on link by Paul Irish
*
* Only fires on body classes that match. If a body class contains a dash,
* replace the dash with an underscore when adding it to the object below.
*
* .noConflict()
* The routing is enclosed within an anonymous function so that you can
* always reference jQuery with $, even when in .noConflict() mode.
* ======================================================================== */
(function($) {
// Use this variable to set up the common and page specific functions. If you
// rename this variable, you will also need to rename the namespace below.
var Sage = {
// All pages
'common': {
init: function() {
// JavaScript to be fired on all pages
if (!$('body').hasClass('home')) {
$(this).find('.banner').removeClass('navbar-fixed-top');
}
},
解决方案
The initMap has to be a global function. Currently, its scope is limited to the init function inside the Sage object inside the function($) {} function. You can do something like this to fix that.
window.initMap = function() {
var location = {lat: 51.47672559, lng: -3.17107379};
var markerloc = {lat: 51.476852, lng: -3.167869};
map = new google.maps.Map(document.getElementById('map'), {
center: location,
scrollwheel: false,
zoom: 17
});
var marker = new google.maps.Marker({
position: markerloc,
map: map,
title: 'Hello World!'
});
};
这篇关于InvalidValueError：initMap不是函数吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
