Question

我正在实习的网站上，我需要对访问者的经纬度坐标进行反向地理编码，但是我无法将这些坐标集成到要求服务调用反向goecoding的我的“ url”字符串中LocationIQ。

我已经尝试将普通变量连接到字符串中，也尝试了getElementById，但是它也不起作用，然后我调用了callback（）函数，但它仍然出错。请注意，我正在使用http://geoip-db.com/中的经纬度和经纬度数据示例，并使用https://locationiq.com/docs#forward-geocoding中的反向地理编码。示例可能彼此不喜欢，但是由于我是Web开发人员的新手，所以我需要一点帮助：）

<script>

var country = document.getElementById('country');
var latitude = document.getElementById('latitude');
var longitude = document.getElementById('longitude');
var ip = document.getElementById('ipv4');

function callback(data)
{
    country.innerHTML = data.country_name;
    latitude.innerHTML = data.latitude;
    longitude.innerHTML = data.longitude;
    ip.innerHTML = data.IPv4;
}

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://geoip-db.com/jsonp';
var h = document.getElementsByTagName('script')[0];
h.parentNode.insertBefore(script, h);

    var settings = {
    "async": true,
    "crossDomain": true,
    "url": "https://us1.locationiq.com/v1/reverse.php?key=be7dfdc7a8184f&lat=" + callback.latitude() + "&lon=" + callback.longitude() + "&format=json",
    "method": "GET"
     }

    $.ajax(settings).done(function (response) {
    console.log(response);
    });
</script>

要么是纬度调用出错，要么是请求返回“无效请求”，我希望它将所有反向数据输出到json文件中，如下所示：

{ “ place_id”：“ 26693344”， “许可证”：“©LocationIQ.com CC BY 4.0，数据©OpenStreetMap贡献者，ODbL 1.0”， “ osm_type”：“节点”， “ osm_id”：“ 2525193585”， “ lat”：“-37.870662”， “ lon”：“ 144.9803321”， “ display_name”：“ Imbiss 25，Blessington Street，圣基尔达，菲利普港城，大墨尔本，维多利亚，澳大利亚3182”， “地址”： { “ cafe”：“ Imbiss 25”， “ road”：“ Blessington Street”， “郊区”：“圣基尔达”， “ county”：“菲利普港城”， “区域”：“大墨尔本地区”， “州”：“维多利亚”， “邮政编码”：“ 3182”， “ country”：“ Australia”， “ country_code”：“ au” }， “ boundingbox”：[ “ -37.870762”， “ -37.870562”， “ 144.9802321”， “ 144.9804321” ] }

Answer 1

我检查了您的代码，发现2个错误。

您没有包含jquery，因此您无法使用$。
而且您不应该在回调函数之外而是在函数内部进行locationiq api调用。

这是我的完整代码，可以正常工作。如有任何问题，请告诉我。

<!DOCTYPE html>
<html>
  <head>
    <title>GEOIP DB - javascript example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
    <div>Country: <span id="country"></span></div>
    <div>Latitude: <span id="latitude"></span></div>
    <div>Longitude: <span id="longitude"></span></div>
    <div>IP: <span id="ipv4"></span></div>
    <script>
      var country = document.getElementById("country");
      var latitude = document.getElementById("latitude");
      var longitude = document.getElementById("longitude");
      var ip = document.getElementById("ipv4");

      function callback(data) {
        country.innerHTML = data.country_name;
        latitude.innerHTML = data.latitude;
        longitude.innerHTML = data.longitude;
        ip.innerHTML = data.IPv4;

        // reverse geocoding
        var settings = {
          async: true,
          crossDomain: true,
          url:
            "https://us1.locationiq.com/v1/reverse.php?key=be7dfdc7a8184f&lat=" +
            data.latitude +
            "&lon=" +
            data.longitude +
            "&format=json",
          method: "GET",
        };

        $.ajax(settings).done(function(response) {
          console.log(response);
        });
      }

      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "https://geoip-db.com/jsonp";
      var h = document.getElementsByTagName("script")[0];
      h.parentNode.insertBefore(script, h);
    </script>
  </body>
</html>

在我的LocationIQ网址请求中动态更改纬度和经度

1 个答案: