從零開始製作一個ip查詢網站-第三章 透過IP取得地理位置

第二章我們成功取得使用者的 IP，但光有一串數字還做不了什麼。 這一章的任務，就是把 IP 變成「看得懂的資訊」——例如國家、城市、時區，甚至是經緯度。 有了經緯度後，我們才能進一步把位置丟到地圖上，整個功能才算真正開始有模有樣。

選擇能查詢位置的 API

既然要透過 IP 取得地理資訊，我再挑選了一個非常好用的服務： ipapi.co。它回傳的內容完整，包含：

• 國家
• 城市
• 地區
• 緯度/經度
• 時區
• 網路業者 ISP

查詢格式是這樣：

https://ipapi.co/你的IP/json/

回傳資料看起來像這樣：

{
    "ip": "123.123.123.123",
    "city": "Taipei",
    "region": "Taiwan",
    "country_name": "Taiwan",
    "latitude": 25.0478,
    "longitude": 121.5319,
    "timezone": "Asia/Taipei"
}

在 React 裡查詢 IP 位置資料

有了 API 後，我把第二章取到的 IP 帶進去一起查詢。 這裡我使用 useEffect 在 IP 更新後自動打 API：

import {useState,useEffect} from "react"

function App(){
    const[ip,setIp]=useState("")
    const[location,setLocation]=useState(null)

    useEffect(function(){
        fetch("https://api.ipify.org?format=json")
        .then(function(res){
            return res.json()
        })
        .then(function(data){
            setIp(data.ip)
        })
    },[])

    useEffect(function(){
        if(ip!=""){
            fetch("https://ipapi.co/"+ip+"/json/")
            .then(function(res){
                return res.json()
            })
            .then(function(data){
                setLocation(data)
            })
        }
    },[ip])

    return(
        <div>
            <div>你的IP：{ip}</div>

            {location&&(
                <div>
                    城市：{location.city}<br>
                    國家：{location.country_name}<br>
                    緯度：{location.latitude}<br>
                    經度：{location.longitude}
                </div>
            )}
        </div>
    )
}

export default App

這樣就能同時顯示：

• 使用者的 IP
• 所在城市
• 國家名稱
• 經緯度

位置資訊到這裡就算完整取得了，接下來就能把地圖加入畫面。