如何在动态变量中使用“ document.getElementById”?

时间:2019-06-21 07:58:44

标签: javascript google-maps reverse-geocoding

我有以下代码,就像用户“ no-deps”给我的一样。...作为一般的想法,我想从谷歌地图中具有poi纬度和经度的变量中获取信息,具有特定地图坐标的地名的可变信息。

问题在于代码的工作原理与返回poi的值一样好,但这是在div过程中仅第一个json发生的。

我认为某种方式必须以动态值来抵制document.getElementById()的引用变量,并作为第二步来定义具有相同动态变量的<div id="'+postid+'"></div> ...

我已经尝试过,但是像我一样没有结果.....

代码如下:

<script type='text/javascript'>
        //<![CDATA[ 
function favouritePosts(json) {
var post_id;
var Lat_long;               // dynamic var with lang and lat information

fetch('https://open.mapquestapi.com/geocoding/v1/reverse?key=jzZATD7kJkfHQOIAXr2Gu0iG62EqMkRO&location='+Lat_long+'')
        .then((data) => {
            return data.json();
        })
        .then((json) => {
                const result = json.results[0].locations[0];
          document.getElementById("output").innerHTML= result.street&","&result.postalCode;
        })
        .catch((err) => {
            console.log(err);
        });
var item = '<div id="'+postid+'"></div>';
        document.write(item);
        }
}
 //]]>
 </script>

1 个答案:

答案 0 :(得分:2)

您应该知道的第一件事是Javascript是单线程的。

由于它是单线程的,因此一次只能做一件事。

为防止浏览器块对代码的执行(这会占用更多时间,例如http请求),浏览器提供了Web api。

Web API具有异步方法,可以防止阻塞。当所有同步代码都完成后,异步方法的回调函数就可以执行。

回到您的情况,函数Fetch是一个异步方法。您只能在回调函数中获取json数据,因为回调函数是在您的同步代码之后执行的,同步代码是您在问题描述中粘贴的最后一行代码。

希望有帮助!