谷歌地图地理编码器 API 的承诺

Posted 2023-02-19

【中文标题】谷歌地图地理编码器 API 的承诺

【英文标题】：Promises With Google Maps Geocoder API

【发布时间】：2018-02-14 07:07:32

【问题描述】：

我正在尝试创建一组函数，使用 Google Maps Geocoder API 将一组地址转换为 lat long 值。

目前，我已经成功地将地址转换为 lat long 值，但函数在返回之前完全执行。我知道这一点，因为它在之后记录正确的 lat long 值之前会引发未定义的错误。

我听说 javascripts promises 可以解决这类问题，所以我做了一些研究，但似乎对这些问题没有帮助。我是新的承诺，如果我以错误的方式处理这件事，请原谅。

这是相关代码

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

提前感谢您提供的任何帮助或指点！

【问题讨论】：

@Jaya 在 getPoints 的 for 循环内有一个叫做 getLatLong 的承诺。同样，我只看了几个视频，所以我可能完全错误地使用了这个。

糟糕，刚刚看到了。此外，您在循环中有一个承诺，并且循环将在执行您的 then 之前进行迭代。所以你需要稍微修改你的代码。让我提供样品

将所有的 promise 放入一个数组中，然后等待它们，但是你希望它并行处理还是一个接一个地处理？

【参考方案1】：

您的主要问题是geocoder.geocode() 是异步的并且需要回调。您将一个函数传递给回调，但将返回值视为将从主函数findLatLang() 返回，但它不会。目前findLatLang() 不返回任何内容。

findLatLang() 是你应该拥有承诺并从函数中返回的地方：

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

然后在getPoints() 的循环中，您可以将这些promise 收集到一个数组中，并在数组上调用Promise.all()，一旦所有promise 都解决了，它将为您提供值：

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 的来源——您在函数中使用它，但它没有被传递到任何地方。

proof of concept fiddle

代码 sn-p：

var geocoder;
var map;
var addressData = [
  location: "New York, NY, USA"
, 
  location: "Newark, NJ, USA"
];

function initialize() 
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), 
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    );
  var coordinates = [];
  var geocoder = new google.maps.Geocoder();
  var bounds = new google.maps.LatLngBounds();

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

  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);
      coordinates = returnVals;
      returnVals.forEach(function(latLng) 
        console.log(latLng);
        var marker = new google.maps.Marker(
          position: 
            lat: latLng[0],
            lng: latLng[1]
          ,
          map: map
        );
        bounds.extend(marker.getPosition());
        map.fitBounds(bounds);
      )
    )

google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas 
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

【讨论】：

addressData 是我用于测试的全局 json 数据变量！我现在正在阅读这个问题以了解它是如何工作的，然后我会告诉你它是否有效！感谢您的评论:)

太棒了！这需要一点点调整！ Promise.all 函数似乎在未来会非常有用