2017-09-05 3 views
0

Google지도 지오 코더 API를 사용하여 일련의 주소를 긴 값으로 변환하는 함수 집합을 만들려고합니다.Google지도 지오 코더 API로 약속하기

현재 주소를 long 값으로 변환하는 데 성공했지만 함수가 반환되기 전에 함수가 완전히 실행됩니다. 나는 그것이 적절한 lat long 값을 기록하기 전에 정의되지 않은 오류를 던지기 때문에 이것을 안다.

자바 스크립트 약속이이 유형의 문제에 대한 해결책이 될 수 있다고 들었으므로 약간의 연구를 수행했지만 문제를 해결하는 데 도움이되지는 않습니다. 임 약속이 새롭다. Im이 잘못된 방향으로 가고 있다면 나에게 실례합니다.

Here`s 관련 코드

function getPoints(geocoder,map) { 
     let locationData = []; 
     let latValue; 
     for(let i = 0; i < addressData.length; i++){ 
      let getLatLong = new Promise(function(resolve,reject){ 
       latValue = findLatLang(addressData[i].location, geocoder, map); 
       if(latValue!=undefined){ 
         resolve(latValue()); 
       } else { 
         reject(); 
       } 
      }); 
      getLatLong.then(function(){ 
       console.log(latValue); 
       //returns a GMap latLng Object. 
       locationData.push(new google.maps.LatLng(latValue[0],latValue[1])); 
      }) 
     } 
     return locationData; 
    } 

function findLatLang(address, geocoder, mainMap) { 
     geocoder.geocode({'address': address}, function(results, status) { 
      if (status === 'OK') { 
       console.log(results); 
       return [results[0].geometry.location.lat , results[0].geometry.location.lng]; 
      } else { 
       alert('Couldnt\'t find the location ' + address); 
       return; 
      } 
     }) 
    } 

당신이하는 어떤 도움이나 포인터에 미리 감사드립니다!

+0

getPoints에서 for 루프의 @Jaya 내부에는 getLatLong이라는 약속이 있습니다. 다시 나는 약간의 비디오만을 보았으므로 완전히 잘못 사용했을 수 있습니다. –

+0

죄송합니다. 또한 루프 내에서 약속을하고 루프가 반복하여 '다음'을 실행할 수 있습니다. 따라서 코드를 약간 수정해야합니다. 내가 샘플을 제공하겠습니다. – Jaya

+0

모든 약속을 배열에 넣은 다음, 모든 것을 기다려야합니다. 그러나 그것을 병렬로 또는 차례로 처리하기를 원하십니까? – Jaya

답변

2

주요 문제는 geocoder.geocode()이 비동기이며 콜백을 사용한다는 것입니다. 함수를 콜백에 전달하지만 반환 값을 주 함수 인 findLatLang()에서 반환하는 것처럼 처리하지만 그렇지 않습니다. 현재 findLatLang()은 아무 것도 반환하지 않습니다. getPoints()에서 루프에서 다음

function findLatLang(address, geocoder, mainMap) { 
    return new Promise(function(resolve, reject) { 
     geocoder.geocode({'address': address}, function(results, status) { 
      if (status === 'OK') { 
       console.log(results); 
       resolve([results[0].geometry.location.lat , results[0].geometry.location.lng]); 
      } else { 
       reject(new Error('Couldnt\'t find the location ' + address)); 
      } 
    }) 
    }) 
} 

그냥 배열로 그 약속을 수집 할 수 있으며, 줄 것이다 배열에 Promise.all() 전화 : 당신이 약속이 있고 함수에서 반환해야하는 위치

findLatLang()입니다 당신 값은 한 번에 모든 약속은 해결 한 :

function getPoints(geocoder,map) { 
    let locationData = []; 
    let latValue; 
    for(let i = 0; i < addressData.length; i++){ 
     locationData.push(findLatLang(addressData[i].location, geocoder, map)) 
    } 
    return locationData // array of promises 
} 

var locations = getPoints(geocoder,map) 

Promise.all(locations)  
.then(function(returnVals){ 
     // you should have return values here when 
     // all promises have rsolved 
      console.log(returnVals); 
}) 

그것의 명확하지 곳 addressData로부터오고있다 - 당신이 함수를 사용하고 있지만, 어디에서 전달되는 아니에요.

+0

addressData는 테스트를 위해 사용하는 전역 json 데이터 var입니다. 지금 어떻게 작동하는지 이해하기 위해 지금 질문을 통해 읽으 려합니다. 문제가 없다면 알려주세요! 의견 주셔서 감사합니다 :) –

+0

awesome! 이것은 약간의 조정으로 효과가있었습니다! Promise.all 함수는 미래에 매우 유용 할 것 같습니다. –