자바 스크립트에서 결과를 기다리는 함수 만들기

Question

Google Maps API를 기반으로 Vue (버전 2.x)를 사용하여 구성 요소를 작성합니다.

이 API에는 getBounds() (ref)의 경계를 가져 오는 내장 함수가 있습니다. 내 코드에서

, I는 0에 경계 객체와지도가 동일 초기화 :

  currentBorders: { 
       b: { 
        b: 0, 
        f: 0, 
       }, 
       f: { 
        b: 0, 
        f: 0, 
       }, 
      }, 

그 후, 나는 특정 중심으로지도를 표시하고 나는 현재를 얻기 위해() 함수를 도로 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가 의미있는 것을 반환 할 때까지 해당 코드의 실행을 차단하는 것입니다. 그게 갈 길이야? 이것을 어떻게 할 수 있습니까?

편집 : 내가 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()); 
    }, 

Answer 1

당신은 아마 당신이지도가 완전히로드 것을 알 때까지 코드를 실행하기 위해 기다려야합니다. 우리는 다음과 같이 수행 할 수 있습니다 : 당신이지도가 완전히로드와 각각의 모든 개체에 액세스 할 경우에만 코드가 실행되는 것을 보장 할 수

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

이 방법. 코드를 이벤트 리스너의 본문에 넣기 만하면됩니다.

이것이 당신을 속이는 지보십시오.

편집 난 당신이 코드에 정의 된 유휴 이벤트를 할 것을 볼

. vue의 작동 방식을 잘 모르겠지만 이벤트가 실행되면 코드를 실행할 수있는 방법이있을 것입니다. 아마도 코드를 idleHandler 함수에 넣고 거기서 작동하는지 확인하십시오.