Question

我正在尝试阅读一些json格式的rest-api，它位于我的本地主机中，然后在我的谷歌地图上显示他们的点，但是有一个问题，因为我无法从getJSON块获取经度和纬度，我我是JavaScript和rest-api的新手。请帮助我，随时提出任何问题，BTW这是我的代码：

<script>
var b=true;
var lon=0.0;
var lat=0.0;
var center=null;
function myMap() {

$.getJSON('http://localhost:4567/game-net/name/megafun', function(data) {

    console.log(data);
    lat+=data[0].lattitude;
    lon+=data[0].longtitude;
    console.log(lat);
    console.log(lon);
    center= new google.maps.LatLng(lat,lon);
    console.log(center);
});
console.log(lat);//this is 0 and if I dont initialize by zero will be undefined
console.log(center);
var myCenter = new google.maps.LatLng(35.741635,51.448145);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: myCenter, zoom: 15};
var map = new google.maps.Map(mapCanvas, mapOptions);
....

Answer 1

您的问题是回调中的代码是在使用谷歌地图的代码之后执行的。 $.ajax是一个异步操作，这意味着它会启动，但尚未在console.log时间内完成并进一步启动操作。请看以下示例：

setTimeout(function() { console.log("foo"); }, 1000); console.log("bar");

在此代码段中，

1.定时器已设定 2.进一步的代码运行，并且“bar”是loged 3.回调引发火灾，“foo”被劫持。

在你的情况下，

客户端开始连接到服务器

某些数据已插入控制台，所有Google地图代码均已运行

只有在此之后，才会发送服务器的响应。

所以最简单的解决方案就是将其余的代码放入回调函数中。

但是过度使用回调可能会使你的代码变得丑陋并导致回调地狱，所以javascript中有一些替代方案可以以更漂亮的方式进行，但是乍一看它们看起来有点复杂。如果您需要任何其他信息，请随时询问。

您可以使用异步函数而不是回调函数。您的代码仍然是异步的，但它看起来好像是同步的，并且更具可读性。首先，将您的功能定义为 async ：async function myMap() {…}。

其次，使用fetch api代替$.ajax，并使用等待关键字。

var unparsedData = await fetch(“your url here”); // the engine will stop execution here and will wait for the server to respond var data = JSON.parse(data); console.log(data); // your data is now here

一些链接：

Here您可以在javascript中找到 asynchrony 的解释，回调地狱的一些示例以及有关 promises 的一些信息。

Here是关于Promises和async-await的非常好的指南。

如何将这些数据传递出这个块？

1 个答案: