高德地址转经纬度求解(附解决方案)

悠悠 2022-12-27 08:22 275阅读 0赞

> 有这样一个需求，从接口获取数据，为一个数组，然后根据数组数据的地址在高德地图上打点，我用到的是高德的 `geocoder.getLocation()`方法进行地址编码，转为经纬度，下面是我的代码：
> 
>     var arrData = [];
>     $this.parmet.street.map((item, i) => {
>         geocoder.getLocation(item.Address, function (status, result) {
>              if (status === 'complete' && result.geocodes.length) { //准换成功
>                    var lnglat = result.geocodes[0].location //转换后的经纬度
>                     if (item.Customer_Group_Class === '一阶') var style_ = 0;
>                     if (item.Customer_Group_Class === '二阶') var style_ = 1;
>                     if (item.Customer_Group_Class === '三阶') var style_ = 2;
>                     var obj = { //建立对象，打点格式需要
>                         "lnglat": [lnglat.lng, lnglat.lat],
>                         "name": item.Customer_Name,
>                         "style": style_,
>                          node: item,
>                     }
>                     addData.push(obj);//存入数组
>             } else { //转换失败
>                     console.log('根据地址查询位置失败:',item.Customer_Name);
>             }
>          });
>     })
> 
> 由于`geocoder.getLocation()`需要异步解析地址，所以造成了异步情况，在解析时循环已经结束了，导致我在外面无法拿到arrData，有什么好的办法吗？

> #### 更新 ####
> 
> ###### 我的解决方案 ######
> 
>     $this.parmet.street.map((item, i) => {
>           geocoder.getLocation($this.parmet.street[i].Address, function (status, result) {
>               if (status === 'complete' && result.geocodes.length) {
>                    console.log(1)
>               } else {
>                    console.log(2)
>               }
>           });
>      })
> 
> 在代码中，我将数组中的每一位元素通过map遍历的方式，调用`geocoder.getLocation()`方法来将元素中的地址转换为经纬度，上面因为异步的原因一直无法拿到解析后的数据，后来通过打印顺序去观察方法的执行顺序，发现在方法中，会先去打印所有解析失败的结果，然后才会打印成功的结果：  
> ![打印输出][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Jvb2tzdG9yZVNwaXJpdA_size_16_color_FFFFFF_t_70]  
> 所以我尝试在循环内部去判断循环是否结束，结束后去执行自己想要的操作，如下：
> 
>     var num = 0;
>     $this.parmet.street.map(item => {
>            geocoder.getLocation($this.parmet.street[i].Address, function (status, result) {
>                 num++;
>                 if (status === 'complete' && result.geocodes.length) {
>                      if (num === $this.parmet.street.length) {
>                            //想要执行的操作
>                      }
>                  } else {
>                      console.log('解析失败')
>                  }
>            });
>     })
> 
> 以上是我自己想出来的解决方案，如果又跟好的欢迎下方讨论

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Jvb2tzdG9yZVNwaXJpdA_size_16_color_FFFFFF_t_70]: /images/20221120/a2af9a8c988947af99504105c215a804.png