InvalidValueError:initMap不是函数吗? [英] InvalidValueError: initMap is not a function?
问题描述
我无法用任何提供的答案解决此问题。为什么这仍然被投票?
我从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屋!