谷歌地图v3与MeteorJS加载同步问题

我的应用程序运行在MeteorJS框架和使用谷歌地图（javascript api v3）。谷歌地图加载方案与post中的解释类似，与官方的tutorial非常相似。但有时它加载应用程序抛出一个重复异常：谷歌地图v3与MeteorJS加载同步问题

Uncaught TypeError: Cannot read property 'lat' of null

下面这段代码导致它（不幸的是，精缩）：

function $H(a, b, c, d) { 
    var e = c[B], f = new jB(d); 
    f[p]("title", e); 
    b[p]("draggableCursor", e, "cursor"); 
    var g = e.Nb; 
    Q("click dblclick rightclick mouseover mouseout mousemove mousedown mouseup".split(" "), function(d) { 
     S[z](b, d, function(e, q, s) { 
      var v = a[Wp](e, !0); 
      e = new U(v.lat(), v.lng()); //here, v is probably null 
     }) 
    }) 
}

我敢肯定这是加载同步问题：一个）应用程序工作正常，仅在加载的第一秒内抛出错误。 b）这种情况在生产中经常发生，自然加载时间更长。

P.S.如果它有帮助，我可以链接到我的应用程序。

来源

2014-08-27 leonprou

那么原因在初始化函数奠定了加载错误。该功能创建了一个没有地图选项的地图，当与Meteor服务器端建立连接时，地图选项被添加到地图中。在地图创建和选项设置之间的这段时间差距出现了。课程是：在相同的代码片段中添加选项以创建地图。

来源

2014-08-30 10:59:47 leonprou

这是我在我的应用解决google-maps v3加载，基本上它涉及宣称一旦我们确信脚本被加载，它被设置为true的GoogleMaps对象的反应ready方法。

client/lib/google-maps.js : 

GoogleMaps={ 
    // public methods 
    config:function(options){ 
    _.extend(this,options); 
    }, 
    ready:function(){ 
    this._loadingDependency.depend(); 
    return this._ready; 
    }, 
    // private methods 
    _loaded:function(){ 
    this._ready=true; 
    this._loadingDependency.changed(); 
    }, 
    // public members 
    apiKey:"", 
    // private members 
    _ready:false, 
    _loadingDependency:new Deps.Dependency() 
}; 

_googleMapsLoaded=function(){ 
    GoogleMaps._loaded(); 
}; 

Meteor.startup(function(){ 
    if(!GoogleMaps.apiKey){ 
    throw new Meteor.Error(-1,"API key not set, use GoogleMaps.config({apiKey:YOUR_API_KEY});"); 
    } 
    $.getScript("https://maps.googleapis.com/maps/api/js?key="+GoogleMaps.apiKey+"&callback=_googleMapsLoaded"); 
});

现在我们可以使用一个GoogleMapsView模板rendered回调里面ready方法：

client/views/google-maps-view/google-maps-view.js : 

<template name="GoogleMapsView"> 
    <div class="google-maps-view"></div> 
</template> 

Template.GoogleMapsView.rendered=function(){ 
    this.autorun(_.bind(function(){ 
    if(GoogleMaps.ready()){ 
     this.mapOptions={ 
     center:new google.maps.LatLng(48.8582,2.2945), 
     zoom:15 
     }; 
     this.map=new google.maps.Map(this.find(".google-maps-view"),this.mapOptions); 
    } 
    },this)); 
};

来源

2014-08-27 20:37:04 saimeunt

感谢您的答复和您的代码解决方案，它似乎工作，我试图在我的项目中实现它。 – leonprou 2014-08-29 10:55:08

谷歌地图v3与MeteorJS加载同步问题

回答

相关问题