从 ip 地址 .net 核心检测位置 - C# (1)

📌 相关文章

📜 从 ip 地址 .net 核心检测位置 - C# (1)

📅 最后修改于: 2023-12-03 15:21:52.810000 🧑 作者: Mango

从 IP 地址 .Net 核心检测位置 - C#

在开发 Web 应用程序时，有时需要获取客户端的位置信息。本文将介绍如何使用 .Net 核心检测客户端的位置，以及如何将所获得的位置数据与地图服务（如 Google 地图）进行集成。

前置条件

为了进行本文所述的位置检测，我们需要使用外部服务提供商的 API。在本例中，我们将使用 IP-API 的 API。IP-API 是一个免费的、开放的 WEB 服务，可用于获取客户端 IP 地址的位置信息。

在使用 IP-API 服务之前，你需要在 IP-API 官网注册，以获得一个 API 访问密钥。注册后，你将获得一个 32 位字符串密钥，用于在 API 请求中识别你的账户。

检测位置

以下是一个使用 IP-API 检测位置的示例代码：

using System;
using System.Net.Http;
using System.Threading.Tasks;

namespace IpLocation
{
    class Program
    {
        static async Task Main(string[] args)
        {
            string ip = "208.80.152.201"; // example IP address

            string url = "http://ip-api.com/json/" + ip;
            HttpClient httpClient = new HttpClient();
            string responseContent = await httpClient.GetStringAsync(url);

            Console.WriteLine(responseContent);
        }
    }
}

在上面的示例中，我们使用 HttpClient 类发送一个 HTTP GET 请求，并获取 API 返回的位置信息。我们在请求 URL 的末尾添加了 IP 地址，以告诉 IP-API 我们要获取的 IP 地址信息。

当你在命令行运行这个应用程序时，你会在控制台中看到类似下面的输出：

{"status":"success","country":"United States","countryCode":"US","region":"CA","regionName":"California","city":"San Francisco","zip":"94105","lat":37.7898,"lon":-122.3942,"timezone":"America/Los_Angeles","isp":"Wikimedia Foundation Inc.","org":"Wikimedia Foundation Inc","as":"AS14907 Wikimedia US network","query":"208.80.152.201"}

在这个简单的示例中，我们只是输出了整个 JSON 响应。IP-API 返回的实际数据包括所请求 IP 的地理坐标、城市、邮政编码、时区、互联网服务提供商 (ISP)，以及其他位置信息。

如果你对输出信息进行解析并将其与地图服务集成，你可以显示客户端的位置信息。下一节我们将讨论如何将位置信息显示在地图上。

将位置信息显示在地图上

在上面的示例中，我们只是输出了 API 返回的 JSON 响应。然而，在实际项目中，我们需要将返回的地理位置信息显示在客户端的浏览器中。将地理位置信息显示在地图上是一个很好的选择，因为人们通常会使用地图来查看位置信息。

Leaflet 是一个流行的 JavaScript 库，用于在 Web 上创建交互式地图。我们可以使用 Leaflet 将我们的位置信息显示在地图上。在本例中，我们将使用 OpenStreetMap 服务作为我们的地图基础数据源。

以下是一个使用 IP-API 和 Leaflet 在 Web 应用程序中显示客户端位置的示例代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Location detection with IP-API and Leaflet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css"
      integrity="sha512-ezNgDi5rL0O6oGLGX55Aproclw4qqu2jtLCfjzfzxdvWYVG612qnO/sYYLFdIP1GxEQcsKvOkv6Kluo0J+TfA=="
      crossorigin="" />
  </head>
  <body>
    <div id="map" style="height: 600px;"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"
      integrity="sha512-J1Xxh28jewEV76Sx6Ps5mlvQhXa8pWbq8ho0FnYOmUn8ObaTHyt2uY2x4BawqxcZ16MHrjWEA1lVO8Cd0OeTEg=="
      crossorigin=""></script>
    <script>
      var map = L.map('map').setView([0, 0], 2);

      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
          maxZoom: 19
      }).addTo(map);

      function ipLookup(ip) {
        var url = "http://ip-api.com/json/" + ip;
        fetch(url)
        .then(function (response) { 
          return response.json(); 
        })
        .then(function (data) {
          if (data.status == "success") {
            var latlng = L.latLng(data.lat, data.lon);
            var marker = L.marker(latlng).addTo(map);
            map.setView(latlng, 13);
            marker.bindPopup("<b>You are here!</b><br>" + 
              "Your location is " + data.city + ", " + data.regionName + ", " + data.countryCode).openPopup();
          } 
        });
      }

      ipLookup("");
    </script>
  </body>
</html>

在上述代码中，我们使用 HTML5 和 JavaScript 分别实现页面布局和位置检测。在页面上，我们创建了一个 div 元素，它将用于在 Leaflet 地图中显示我们检测到的位置。

在 JavaScript 代码中，我们首先使用 Leaflet 创建了一个新的地图，然后将 OpenStreetMap 作为我们的地图底图。我们还定义了一个 ipLookup 函数，该函数接受一个 IP 地址作为参数，并使用 fetch API 发出 HTTP GET 请求来检索 IP 地址的位置信息。

如果请求成功，我们将创建一个标记并将地图视图设置为所请求的位置。我们还将标记的弹出窗口设置为显示除 IP 地址外的其他位置数据（即城市、省份和国家/地区代码）。

当你在浏览器中运行此代码时，你将看到类似下面的页面：

Location detection with IP-API and Leaflet screenshot

当你在浏览器中运行这个应用程序时，你会在地图上看到一个水滴标记，它代表客户端的位置，同时会在标记上显示客户端的城市、省份和国家/地区代码。

总结

上面的代码示例展示了如何使用 .Net 核心检测客户端的位置，以及如何将位置信息集成到 JavaScript 应用程序中。此外，我们还介绍了如何使用开源 Leaflet 库将位置信息显示在地图上。使用这些示例代码，你可以快速编写自己的应用程序，并获得客户端的位置信息，用于为客户端提供更好的服务。