javascript - 在 JavaScript 中从 Geocoding Google-Api 添加地址到表

标签 javascript google-maps google-maps-api-3

我正在尝试制作家长控制系统,该系统允许家长在 WebService 中跟踪其 child 的位置历史记录。

我有一个移动应用程序可以将位置发送到 Google Firebase 中的实时数据库。这些位置(纬度和经度)从 Firebase 发送到我的 Javascript 代码,我想将它们放到我的 HTML 中的表格中。我不想把经度和纬度放在 table 上,而是我想根据这个位置保存地址。这就是我使用 Google Geolocations API 的原因。问题是,当我在要放入表的变量中设置此地址时,此变量似乎未定义。我认为这个变量的范围可能有问题,但我无法处理。在此先感谢您的帮助。我把我的 JS 代码放在下面:

var longitude;
var latitude;
var address;

//GETING DATA FROM FIREBASE
$(document).ready(function(){
    var rootRef = firebase.database().ref().child("locations");
    rootRef.on("child_added", snap => {
        time = snap.child("time").val();
        longitude = snap.child("longitude").val();
        latitude = snap.child("latitude").val();

        latitude = parseFloat(latitude);
        longitude = parseFloat(longitude);

        //CONVERTING LATITUDE AND LONGITUDE INTO ADDRESS

        var geocoder = new google.maps.Geocoder();
        var location = new google.maps.LatLng(latitude, longitude);
        geocoder.geocode({'latLng': location}, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                address = results[0].formatted_address;
                //HERE ADDRESS IS DISPLAYING GOOD
            }
        });

        //PUT ADDRESS INTO TABLE (THERE IS PROBLEM - ADDRESS IS Undefined)

        $("#table_body").append("<tr><td>" + time + "</td><td>" + address + "</td><td>");
    })
})

最佳答案

尝试将您的 jQuery.append() 移动到条件表达式中:

coder.geocode({'latLng': location}, function (results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    var tempAddress = results[0].formatted_address;
    $("#table_body").append("<tr><td>" + time + "</td><td>" + tempAddress + "</td><td>");
  }
});

关于javascript - 在 JavaScript 中从 Geocoding Google-Api 添加地址到表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56120680/

相关文章:

Javascript数组不使用for循环变量

javascript - 事件驱动编程node.js?

javascript - Subspace JavaScript 跨域通信的实现?

javascript - jquery 的 live() 已弃用。我现在用什么?

html - 如何在网站中插入一个完全响应的谷歌地图

javascript - 谷歌地图 : Clickable Custom Marker

Javascript "load"事件未按预期工作

android - 自定义彩色绘图作为 Google Maps API v2 中的 map 标记 - Android

ios - 在 iOS 中获取谷歌地图的中心

javascript - 如何知道街景全景图是在室内还是室外