2017-09-28 16 views
-1

GoogleマップAPIに基づいてVue(バージョン2.x)でコンポーネントを構築しています。関数がJavaScriptの結果を待つようにする

このAPIには、マップの境界を取得する組み込み関数getBounds()(ref)があります。私のコードで

、Iは境界オブジェクトにマップを初期化は、0に等しい:

その後
  currentBorders: { 
       b: { 
        b: 0, 
        f: 0, 
       }, 
       f: { 
        b: 0, 
        f: 0, 
       }, 
      }, 

、私は特定の中心にマップを表示し、Iは電流を得るためのgetBounds()関数を実行しますそれが中心にされた後、マップの値は:今

 getBorders() { 
      console.log(this.currentBorders); // -> prints the object with all values equal to 0 

      this.currentBorders = this.$map.getBounds(); 

      console.log(this.currentBorders); // -> prints undefined 

      return { 
       llc_lat: this.currentBorders.f.b, 
       llc_lng: this.currentBorders.b.b, 
       urc_lat: this.currentBorders.f.f, 
       urc_lng: this.currentBorders.b.f, 
      }; 
     }, 

、問題は最初の実行時にマップがあるだろうので、私は0に設定されcurrentBordersを持っているが、のgetBoundsの最初の実行は、()undefinedを返しますということですまだ読み込まれていません。

私がしたいのは、getBoundsが意味のある何かを返すまで、そのコードの実行をブロックすることです。それは行く方法ですか?どうすればこれを達成できますか?

EDIT: これは私がdeferredReadyて、マップを初期化する方法である:あなたがマップが完全にロードされていることを知っているまで

deferredReady() { 
     this.$map.setOptions({ 
      styles: mapStyles(), 
     }); 

     this.initializeMapOverlay(); 
     this.canvasContext = this.mapCanvas.getContext("2d"); 
     this.$map.addListener("idle", this.idleHandler); 
     this.$map.addListener("zoom_changed",() => { 
      this.resizeCanvas(); 
      this.clearCanvas(); 
     }); 
     this.$map.addListener("mousemove", this.mouseoverHandler); 
     this.$map.addListener("drag", this.fetchHexagons()); 
    }, 
+1

マップインスタンシエーションと 'getBounrds()'コールに関するコードを表示できますか? –

+0

マップが初期化されるまで単に 'getBounds'を呼び出すのを待つのはなぜですか?それともあなたの質問ですか? – thanksd

答えて

0

あなたはおそらく、あなたのコードを実行するのを待つ必要があります。あなたはマップが完全にロードされ、それぞれのオブジェクトのすべてがアクセス可能である場合にのみ、あなたのコードが実行されることを保証することができます

google.maps.event.addListenerOnce(map, 'idle', function(){ 
    // idle state is triggered once map is fully loaded, or failed to load. 
}); 

この方法:我々はこのようにそれを行うことができます。あなたのコードをイベントリスナーの本体に入れてください。

それがあなたのトリックであるかどうかを確認してください。

編集

私はあなたのコード内で定義されたアイドルイベントを持っていることがわかります。私はどのようにvueが動作するのかは分かりませんが、おそらくイベントが実行されたらコードを実行する方法があります。おそらくあなたのidleHandler関数の中にコードを入れて、そこで動作するかどうかを確認してください。

関連する問題