簡體   English   中英

帶有MeteorJS的Google Maps v3加載同步問題

[英]Google Maps v3 with MeteorJS loading sync issue

我的應用程序在MeteorJS框架上運行,並使用Google Maps(javascript api v3)。 谷歌地圖加載方案類似於在此說明一個職位 ,而這是相當類似的官方教程 但是有時在加載應用程序時會引發重復的異常:

未捕獲的TypeError:無法讀取null的屬性“ lat”

下面的代碼導致了它(不幸的是,縮小了):

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 
        })
    })
}

我非常確定這是加載同步問題:a)應用運行正常,並且僅在加載的最初幾秒鍾就引發了錯誤。 b)這種情況在生產中經常發生,因此加載時間自然會更長。

附言:如果有幫助,我可以鏈接到我的應用程序。

這就是我處理應用程序中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));
};

好吧,加載錯誤的原因在於初始化函數。 該函數創建了沒有地圖選項的地圖,並且當與Meteor服務器端建立連接時,地圖選項已添加到地圖中。 在地圖創建和選項設置之間的這段時間間隔內,出現了錯誤。 課程是:在同一代碼段中向創建的地圖添加選項。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM