前言
前期准备
- 注册成为开发者，获取Key
- - IP定位和逆地理编码API文档
思路讲解
- 1、IP地址获取
- 2、IP定位获取经纬度
- 3、逆地理编码获取地理位置
代码实现
- 本地运行版
- - 新版
  - 旧版本（已不适用）
- web服务版
- - ip_pos.html
  - get_ip.c

前言

本文主要通过高德地图API进行一系列的分析。提供具体的讲解和源码。
获取的经纬度和地理位置精确度并不高，仅供参考
请勿非法使用，本人概不负责。
效果如下

前期准备

注册成为开发者，获取Key

高德开发平台：https://console.amap.com/dev/key/app
注册用户
填写相关信息成为开发者

创建key

需要先创建应用

然后点击添加

选择“web服务”，我们需要的就是逆地理编码和 IP定位API。ps：点击服务的蓝色字可以跳转到官方教程

创建完成后，就能获取到key了

IP定位和逆地理编码API文档

2022/07/22 发现v5已经改v3了，注意适配 https://restapi.amap.com/v3/ip?ip=114.247.50.2&output=xml&key=<用户的key>
https://lbs.amap.com/api/webservice/guide/api/ipconfig/

https://lbs.amap.com/api/webservice/guide/api/georegeo/

思路讲解

1、IP地址获取

采用2种方式，如果本地运行，选用搜狐接口 http://pv.sohu.com/cityjson?ie=utf-8，可以获取到访问者IP等信息。如果有web服务器，可以采用自建http请求获取访问者IP。

2、IP定位获取经纬度

调用高德地图 IP定位API https://restapi.amap.com/v5/ip?type=4&key=<用户的key>&ip=114.247.50.2
注意，上面的key就是我们刚才申请的应用里的key，将其替换于此，type是IP类型，ip就是你要查的IP。

我这用postman测试下，我们要的就是location，返回的json数据方便解析

3、逆地理编码获取地理位置

调用高德地图逆地理API https://restapi.amap.com/v3/geocode/regeo?location=116.310003,39.991957&key=<用户的key>&radius=1000&extensions=all
其中location就是我们上一步获取的经纬度信息，key就是我们申请的key，其他参数都是调节用的，因为这些数据不确定，所以我实现时进行了简化。

测试，简化后，我们就获取formatted_address的内容

代码实现

本地运行版

创建XMLHttpRequest对象的实现并不严谨，可以优化，不过我懒了0.0
XMLHttpRequest - Web API 接口参考 | MDN
XMLHttpRequest 对象 W3C

文件名为 ip_pos.html，后缀是html就行

新版

<!DOCTYPE html>
<html lang="zh-CN"><head><title>我找到你了</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head><body><span id="ip"></span><br><span id="pos"></span><br><span id="address"></span>
</body>
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script type="text/javascript">// 存储IP地址var ip = returnCitySN["cip"];document.getElementById("ip").innerText = "你的IP是" + ip;get_pos(ip);function get_pos(ip){// 构建urlvar url = "https://restapi.amap.com/v3/ip?key=<你的key>&ip=" + ip;// 建立所需的对象var httpRequest = new XMLHttpRequest();// 打开连接  将请求参数写在url中 httpRequest.open('GET', url, true);// 发送请求  将请求参数写在URL中httpRequest.send();// 经纬度坐标var pos = "";// 获取数据后的处理程序httpRequest.onreadystatechange = function () {if (httpRequest.readyState == 4 && httpRequest.status == 200) {// 获取到json字符串var ret = httpRequest.responseText;//console.log(ret);// 转为JSON对象var json = JSON.parse(ret);console.log(json);pos = json["rectangle"];document.getElementById("pos").innerText = "你的经纬度是" + pos;pos_arr = pos.split(';');get_addr(pos_arr[0]);}};}function get_addr(pos){var httpRequest = new XMLHttpRequest();url = "https://restapi.amap.com/v3/geocode/regeo?key=<你的key>&radius=0&extensions=all&batch=false&location=" + pos;httpRequest.open('GET', url, true);httpRequest.send();httpRequest.onreadystatechange = function () {if (httpRequest.readyState == 4 && httpRequest.status == 200) {// 获取到json字符串var ret = httpRequest.responseText;//console.log(ret);// 转为JSON对象var json = JSON.parse(ret);console.log(json);var address = json["regeocode"]["formatted_address"];console.log(address);document.getElementById("address").innerText = "你的地址大概是" + address;}};}
</script></html>

旧版本（已不适用）

<!DOCTYPE html>
<html lang="zh-CN"><head><title>我找到你了</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head><body><span id="ip"></span><br><span id="pos"></span><br><span id="address"></span>
</body>
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script type="text/javascript">// 存储IP地址var ip = returnCitySN["cip"];document.getElementById("ip").innerText = "你的IP是" + ip;get_pos(ip);function get_pos(ip){// 构建urlvar url = "https://restapi.amap.com/v5/ip?key=<你的key>&type=4&ip=" + ip;// 建立所需的对象var httpRequest = new XMLHttpRequest();// 打开连接  将请求参数写在url中 httpRequest.open('GET', url, true);// 发送请求  将请求参数写在URL中httpRequest.send();// 经纬度坐标var pos = "";// 获取数据后的处理程序httpRequest.onreadystatechange = function () {if (httpRequest.readyState == 4 && httpRequest.status == 200) {// 获取到json字符串var ret = httpRequest.responseText;//console.log(ret);// 转为JSON对象var json = JSON.parse(ret);console.log(json);pos = json["location"];document.getElementById("pos").innerText = "你的经纬度是" + pos;get_addr(pos);}};}function get_addr(pos){var httpRequest = new XMLHttpRequest();url = "https://restapi.amap.com/v3/geocode/regeo?key=<你的key>&radius=0&extensions=all&batch=false&location=" + pos;httpRequest.open('GET', url, true);httpRequest.send();httpRequest.onreadystatechange = function () {if (httpRequest.readyState == 4 && httpRequest.status == 200) {// 获取到json字符串var ret = httpRequest.responseText;//console.log(ret);// 转为JSON对象var json = JSON.parse(ret);console.log(json);var address = json["regeocode"]["formatted_address"];console.log(address);document.getElementById("address").innerText = "你的地址大概是" + address;}};}
</script></html>

web服务版

我这里用的CGI，web服务为boa或apache。

ip_pos.html

<!DOCTYPE html>
<html lang="zh-CN"><head><title>我找到你了</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head><body><span id="ip"></span><br><span id="pos"></span><br><span id="address"></span>
</body><script type="text/javascript">// 存储IP地址var ip = "";var xmlhttp;if(window.XMLHttpRequest){//code for IE7+,Firefox,Chrome,Opera,Safarixmlhttp = new XMLHttpRequest();}else{//code for IE6,IE5xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange = function(){if(xmlhttp.readyState == 4){if(xmlhttp.status == 200){//将接收到的字符串存入strvar str = xmlhttp.responseText;if(str.length == 0){return;}// 解决XML， 解析错误：语法错误try //Internet Explorer{xmlDoc = new ActiveXObject("Microsoft.XMLDOM");xmlDoc.async = "false";xmlDoc.loadXML(text);} catch (e) {try //Firefox, Mozilla, Opera, etc.{parser = new DOMParser();xmlDoc = parser.parseFromString(str, "text/xml");} catch (e) { alert(e.message) }}var ret = xmlDoc.getElementsByTagName('p')[0].textContent;ip = ret;console.log(ip);document.getElementById("ip").innerText = "你的IP是" + ip;get_pos(ip);}else{//alert(xmlhttp.status);}}else{//alert(xmlhttp.readyState);}}xmlhttp.open("GET","cgi-bin/get_ip.cgi?get",true);xmlhttp.send();function get_pos(ip){// 构建urlvar url = "https://restapi.amap.com/v5/ip?key=<你的key>&type=4&ip=" + ip;// 建立所需的对象var httpRequest = new XMLHttpRequest();// 打开连接  将请求参数写在url中 httpRequest.open('GET', url, true);// 发送请求  将请求参数写在URL中httpRequest.send();// 经纬度坐标var pos = "";// 获取数据后的处理程序httpRequest.onreadystatechange = function () {if (httpRequest.readyState == 4 && httpRequest.status == 200) {// 获取到json字符串var ret = httpRequest.responseText;//console.log(ret);// 转为JSON对象var json = JSON.parse(ret);console.log(json);pos = json["location"];document.getElementById("pos").innerText = "你的经纬度是" + pos;get_addr(pos);}};}function get_addr(pos){var httpRequest = new XMLHttpRequest();url = "https://restapi.amap.com/v3/geocode/regeo?key=<你的key>&radius=0&extensions=all&batch=false&location=" + pos;httpRequest.open('GET', url, true);httpRequest.send();httpRequest.onreadystatechange = function () {if (httpRequest.readyState == 4 && httpRequest.status == 200) {// 获取到json字符串var ret = httpRequest.responseText;//console.log(ret);// 转为JSON对象var json = JSON.parse(ret);console.log(json);var address = json["regeocode"]["formatted_address"];console.log(address);document.getElementById("address").innerText = "你的地址大概是" + address;}};}
</script></html>

get_ip.c

配合 cgic.h 和 cgic.c编译 gcc get_ip.c cgic.c -o get_ip.cgi

#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <unistd.h>
#include "cgic.h"int cgiMain(void)
{// 用于接收环境变量QUERY_STRINGchar *lenstr = NULL;// 搜索环境变量 QUERY_STRING,并返回相关的值给字符串lenster。lenstr = getenv("QUERY_STRING");// 若没有找到环境变量 QUERY_STRING,直接returnif (lenstr == NULL){return -1;}// 使用MIME头信息″Content-type: text/html\n\n″来输出HTML源代码给Web服务器。// 请注意任何MIME头信息后必须有一个空行。一旦发送这个MIME头信息给Web服务器后,Web浏览器将认为随后的文本输出为HTML源代码printf("Content-type: text/html\n\n");printf("<p>%s</p>", cgiRemoteAddr);return 0;
}

前端页面获取访问者的IP地址、经纬度和地理位置相关推荐

Java 获取访问者的IP地址
获取访问者的ip地址这一次,依然是一个工具类,主要是用来获取当前用户访问服务器的ip地址,可以用于更快的查找出是在那一台电脑上进行操作的那些东西. package com.fashion.fox.c ...
springboot 获取访问者的ip地址、访问设备信息、城市地址信息
1.获取访问者的ip地址: 不多说直接上代码,详解见注释 package com.xr.util;import lombok.extern.slf4j.Slf4j;import javax.servl ...
Java | IP工具类（获取访问者的ip地址查询IP地址）
一.IpUtil package com.java.util;import com.fasterxml.jackson.annotation.JsonInclude; import com.faste ...
获取访问者的IP地址
2019独角兽企业重金招聘Python工程师标准>>> HTTP_X_FORWARDED_FOR:浏览当前页面的用户计算机的网关如果用户是通过代理服务器浏览的那么使用REMOTE ...
oracle实例查询IP,Oracle数据库中获取访问者的IP地址或主机名的方法
有时我们需要在Oracle数据库中获取访问者的局域网或Internet网的主机名或IP地址.在Oracle中可以使用下面的方法来实现: Oracle包utl_inaddr 作用:用于取得局域网或Int ...
纯前端js获取电脑本地IP地址(必用)
注意启动本地服务才能获取到: function getUserIP(onNewIP) { // onNewIp - your listener function for new IPs //comp ...
获取网页访问者的IP地址
描述:获取网页访问者的IP地址,并显示出访问时间原理:使用JSP内置对象request的getRemoteAddr方法获取访问者地址:使用SimpleDateFormat将当前时间转换为指定的时间格 ...
前端Vue中获取本机ip地址
前端Vue中获取本机ip地址 1.打开谷歌浏览器,地址栏输入chrome://flags,进入. 2.搜索Anonymize local IPs exposed by WebRTC,将其设置为Disa ...
PHP获取IP地址所在的地理位置
PHP获取IP地址所在的地理位置时间:2011-04-02 16:19来源:三知开发网作者:许亮点击: 787 次 http://www.sunchis.com/html/php/phpsour ...

前端页面获取访问者的IP地址、经纬度和地理位置

目录

前言