gpt4 book ai didi

javascript - 在我的 LocationIQ url 请求中动态更改纬度和经度

转载 作者:行者123 更新时间:2023-11-30 06:15:34 24 4
gpt4 key购买 nike

我正在一个网站上实习,我需要对访问者的经纬度坐标进行反向地理编码,但我无法将这些坐标整合到请求反向的 url 字符串中来自名为 LocationIQ 的服务的 goecoding。

我已经尝试将普通变量连接到字符串中,我还尝试了 getElementById 但它也不起作用,然后我调用了我的 callback() 函数,但它仍然出错。对于通知,我正在使用 http://geoip-db.com/ 中的给定示例对于纬度和经度数据以及 https://locationiq.com/docs#forward-geocoding用于反向地理编码。可能这些示例彼此不喜欢,但由于我是网络开发的新手,我需要一些帮助:)

<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", "licence": "© LocationIQ.com CC BY 4.0, Data © OpenStreetMap contributors, ODbL 1.0", "osm_type": "node", "osm_id": "2525193585", "lat": "-37.870662", "lon": "144.9803321", "display_name": "Imbiss 25, Blessington Street, St Kilda, City of Port Phillip, Greater Melbourne, Victoria, 3182, Australia", "address": { "cafe": "Imbiss 25", "road": "Blessington Street", "suburb": "St Kilda", "county": "City of Port Phillip", "region": "Greater Melbourne", "state": "Victoria", "postcode": "3182", "country": "Australia", "country_code": "au" }, "boundingbox": [ "-37.870762", "-37.870562", "144.9802321", "144.9804321" ] }

最佳答案

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

  1. 你没有包含 jquery,所以你不能使用 $。
  2. 并且您不应该在回调函数之外而是在您的函数内部调用 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>

关于javascript - 在我的 LocationIQ url 请求中动态更改纬度和经度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56439258/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com