几个月前，为了一个 12 小时的黑客马拉松，我与Maggie Liu和Gautam Paranjape一起构建了https://geochattr.netlify.app/ 。
该项目本质上是一种通过图纸进行交流的方式，您可以与您所在城市的人聊天。
我们获得该城市聊天室位置的方法是使用您的 IP。
指导
为此，我们将不得不使用 API 来获取位置信息。
我通常发现大多数都有某种高级计划，但IpAPI已经足够好，并且具有很高的准确性以使其运行。
快速方法
要获取您的位置，只需从客户端向https://ipapi.co/json/发出 GET 请求。这将直接给我们所有必要的信息来获取用户的位置。
您可以从客户端使用您想要的任何库。我倾向于坚持axios ，所以这里是axios的一个例子：
axios . get ( " https://ipapi.co/json/ " ). then ( location => { console . log ( location . data ) });
但是，如果您使用纯 HTML、CSS、JS 执行此操作，您将需要使用浏览器的fetch API。
fetch("https://ipapi.co/json/").then(data=>data.json).then(location=>{ console.log(location); })
然后，您将拥有如下所示的内容（显然我使用的是 VPN）：
{
"ip" : "89.238.130.72" ,
"version" : "IPv4" ,
"city" : "Manchester" ,
"region" : "England" ,
"region_code" : "ENG" ,
"country" : "GB" ,
"country_name" : "United Kingdom" ,
"country_code" : "GB" ,
"country_code_iso3" : "GBR" ,
"country_capital" : "London" ,
"country_tld" : ".uk" ,
"continent_code" : "EU" ,
"in_eu" : false ,
"postal" : "M32" ,
"latitude" : 53.4507 ,
"longitude" : -2.3186 ,
"timezone" : "Europe/London" ,
"utc_offset" : "+0100" ,
"country_calling_code" : "+44" ,
"currency" : "GBP" ,
"currency_name" : "Pound" ,
"languages" : "en-GB,cy-GB,gd" ,
"country_area" : 244820.0 ,
"country_population" : 66488991 ,
"asn" : "AS9009" ,
"org" : "M247 Ltd"
}
更安全的方法
当然，客户端可以随时禁用 JavaScript，这意味着他们可以禁用对 API 的 GET 请求。但是，我们仍然可以获取服务器上的 IP。
例如，如果用户想上传一个帖子，并且您想根据他们在哪个城市对其进行分类，您可以获得 IP。我们可以像这样从用户那里获取 IP：
app . post ( " /upload " , ( req , res ) => { /* ... */ const ip = req . headers [ ' x-forwarded-for ' ] || req . connection . remoteAddress ; console . log ( ip ); // ip address of the user })
然后，我们可以再次向 ipapi.co 发出 GET 请求，但这一次，我们将发送一些不同的请求。
我们不会向https://ipapi.co/{ip}/json发送请求，而是向https://ipapi.co/json发送请求，其中 {ip} 是您从传入的 IP 中提取的 IP用户的请求。例如，这看起来像https://ipapi.co/89.238.130.72/json/ 。您可能应该将axios用于服务器端请求，因此请按照上面的示例了解如何发出 GET 请求。
结论
我希望你学到了一些关于如何实际做到这一点的新知识。我记得我在黑客马拉松期间被困了一两个小时，我想帮助防止其他人在未来出现这种困惑。
如果你想看一个很酷的演示，请查看https://ip-grabber-demo.shubhampatilsd.repl.co/以获取交互式地图。
源代码位于https://replit.com/@ShubhamPatilsd/ip-grabber-demograbber-demo#index.html
无论如何，如果您喜欢这个博客并在Twitter 上关注我，请在左侧留言！