当前位置： 首页 > news >正文

JS获取经纬度, 并根据经纬度得到城市信息

news 2026/2/6 21:25:54

在JavaScript中，获取经纬度通常需要使用定位服务，比如HTML5的Geolocation API。然而拿到坐标后，将经纬度转换为城市信息，则需要使用逆地理编码服务接口，比如百度或者高德的 API, 但是他们收费都很高, 我们可以使用一些便宜的接口, 效果一样的。

以下是一个简单的示例：

一、获取经纬度

首先，你需要使用Geolocation API获取用户的经纬度。这需要用户的许可，所以它是一个异步操作。以下是如何获取经纬度的代码：

navigator.geolocation.getCurrentPosition(function(position) {var lat = position.coords.latitude;var lon = position.coords.longitude;console.log("Latitude: " + lat);console.log("Longitude: " + lon);
}, function(error) {console.log("Error occurred. Error code: " + error.code);// error.code 可以是：0, 1,或2
});
二、根据经纬度获取城市信息

然后，你可以使用易客云API将经纬度转换为城市信息。以下是使用此API的示例代码：

<!-- 此示例需要注册api账号https://yikeapi.com/index/geocode
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%"><head><meta charset="utf-8"></head><body style="height: 100%; margin: 0"><div id="container" style="height: 100%"></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script><script type="text/javascript">$.get('http://apia.yikeapi.com/geocode/?appid=43656176&appsecret=I42og6Lm&output=json&location=116.437039,39.999664',function(res) {console.log(res);var json = JSON.parse(res);if (json.errcode == 0) {console.log('当前所在城市：' + json.regeocode.addressComponent.district);}});</script></body></html>

输出结果

{“errcode”:0,“errmsg”:“success”,“nums”:147,“regeocode”:{“addressComponent”:{“province”:“北京市”,“city”:“北京市”,“district”:“朝阳区”,“adcode”:“110105”}}}
当前所在城市：朝阳区

易客云的逆地理编码接口返回的json结构和百度高德一模一样, 但是只支持区县级, 每日5万次级的仅需要三位数, 比5万便宜多啦🌶, 如果不是街道级定位要求, 那可以用这个

接口返回JSON
{"errcode":0,"errmsg":"success","nums":140,"regeocode":{"addressComponent":{"province":"北京市","city":"北京市","district":"朝阳区","adcode":"110105"}}
}

另外，也请注意，上述操作需要用户允许浏览器访问地理位置信息，这在某些浏览器设置或用户隐私设置中可能被禁用或受限。

相关文章：

JS获取经纬度, 并根据经纬度得到城市信息

在JavaScript中&#xff0c;获取经纬度通常需要使用定位服务&#xff0c;比如HTML5的Geolocation API。然而拿到坐标后&#xff0c;将经纬度转换为城市信息&#xff0c;则需要使用逆地理编码服务接口&#xff0c;比如百度或者高德的 API, 但是他们收费都很高, 我们可以使用一些…...

编程日记 2023/9/23 14:04:02

mac m1 docker安装nacos

文章目录 引言I m1安装docker1.1 Docker 下载1.2 终端Docker相关命令II docker安装nacos2.1 安装nacos2.2 镜像启动see alsoMac 查看进程端口引言 使用docker方式安装是最方便的 I m1安装docker 1.1 Docker 下载 https://docs.docker.com/docker-for-mac/apple-silicon/点击…...

编程日记 2023/9/23 14:02:01

位段 联合体 枚举

Hello好久不见&#xff0c;今天分享的是接上次结构体没有分享完的内容&#xff0c;这次我们讲讲位段 枚举和联合体的概念以及他们的用法。 2.1 什么是位段 位段的声明和结构是类似的&#xff0c;有两个不同&#xff1a; 1.位段的成员必须是 int、unsigned int 或signed int 。 …...

编程日记 2023/9/23 13:59:59

PHP循环获取Excel表头字母A-Z，当超过时输出AA,AB,AC,AD······

PHP循环获取Excel表头字母A-Z&#xff0c;当超过时输出AA,AB,AC,AD PHP循环生成Excel的列字母表 $count_num 26 * 27; $letter A; $arr []; while($count_num--){$arr[] $letter;$letter; }结果如下&#xff1a; 转为JSON更为直观&#xff1a; ["A","B&…...

编程日记 2023/9/23 13:57:57

识别准确率达 95%，华能东方电厂财务机器人实践探索

摘 要&#xff1a;基于华能集团公司大数据与人工智能构想理念&#xff0c;结合东方电厂实际工作需要&#xff0c;财务工作要向数字化、智能化纵深推进&#xff0c;随着财务数字化转型和升级加速&#xff0c;信息化水平不断提升&#xff0c;以及内部信息互联互通不断加深&#x…...

编程日记 2023/9/23 13:56:56

代码随想录算法训练营 单调栈part03

一、柱状图中最大的矩形 84. 柱状图中最大的矩形 - 力扣&#xff08;LeetCode&#xff09; 单调栈很重要的性质&#xff0c;就是单调栈里的顺序&#xff0c;是从小到大还是从大到小。 栈顶和栈顶的下一个元素以及要入栈的三个元素组成了我们要求最大面积的高度和宽度&#x…...

编程日记 2023/9/23 13:52:52

使用 MyBatisPlus 的注解方式进行 SQL 查询，它结合了条件构造器（Wrapper）和自定义 SQL 片段来构建查询语句。

MyBatis-Plus 是一个基于 MyBatis 的增强工具&#xff0c;它提供了一套方便的注解方式来进行 SQL 查询。其中&#xff0c;它结合了条件构造器&#xff08;Wrapper&#xff09;和自定义 SQL 片段来构建查询语句。 官网&#xff1a;条件构造器 | MyBatis-Plus 1、使用 Wrapper …...

编程日记 2023/9/23 13:50:50

Python中统计单词出现的次数，包含（PySpark方法）

思路&#xff1a; 定义一个函数&#xff0c;使用open函数&#xff0c;将文本内容打开。 定义一个空字典和空列表&#xff0c;进行循环及条件判断操作def count_word(file_path):dict_data {} #定义一个空字典f open(file_path,"r",encoding"UTF-8")lis…...

编程日记 2023/9/23 13:49:49

探讨基于IEC61499 的分布式 ISA Batch 控制系统

ISA SP88 是批次过程控制的标准&#xff0c;对应的IEC标准是IEC 61512。该标准中一个重要的部分是配方管理&#xff08;Recipe Management&#xff09;。 所谓配方&#xff0c;是根据批量产品的要求&#xff0c;材料设定加工工艺&#xff0c;加工流程和参数。类似于传统制造业的…...

编程日记 2023/9/23 13:47:47

图论16（Leetcode863.二叉树中所有距离为K的结点）

答案&#xff1a; /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode(int x) { val x; }* }*/ class Solution {public List<Integer> distanceK(TreeNode root, TreeNode tar…...

编程日记 2023/9/23 13:43:43

【小沐学C++】C++ MFC中嵌入64位ActiveX控件（VS2017）

文章目录 1、简介1.1 MFC1.2 ActiveX 2、VS2017添加ActiveX控件结语 1、简介 1.1 MFC Microsoft 基础类 (MFC) 库针对大部分 Win32 和 COM API 提供面向对象的包装器。 虽然此包装器可用于创建极为简单的桌面应用程序&#xff0c;但当你需要开发具有多个控件的更复杂的用户界…...

编程日记 2023/9/23 13:42:42

Linux常用命令—find命令大全

文章目录 一、find命令常用功能1、find命令的基本信息如下。2、按照文件名搜索3、按照文件大小搜索4、按照修改时间搜索5、按照权限搜索举例&#xff1a;6、按照所有者和所属组搜索7、按照文件类型搜索8、逻辑运算符 一、find命令常用功能 1、find命令的基本信息如下。 命令名…...

编程日记 2023/9/23 13:36:36

form组件的封装（element ui ） 简单版本

当你使用Vue.js构建Web应用时&#xff0c;封装可复用组件是提高开发效率和代码可维护性的关键之一。在这篇文章中&#xff0c;我们将探讨如何使用Vue.js来创建一个通用的表单组件&#xff0c;以及如何将它封装成一个可配置的组件。 实现思路 拿下表单模板一个个的改造&#x…...

编程日记 2023/9/23 13:34:34

树形DP杂题

引 对老师布置的题目稍微记录一下吧 也算对树形 D P DP DP 的巩固 T1 Ostap and Tree 题目传送门 由于有 距离 k 距离k 距离k 的限制&#xff0c;设计二维 d p dp dp 设计状态&#xff1a; f i , j : i 的子树内&#xff0c;离 i 最近的染色点与 i 距离为 j 且若 j <…...

编程日记 2023/9/23 13:33:34

Webpack使用plugin插件自动在打包目录生成html文件

我们使用html-webpack-plugin插件可以自动在打包代码目录生成html文件 使用步骤&#xff1a; 一、安装依赖 在控制台中输入如下代码&#xff1a; npm i -D html-webpack-plugin 二、在webpack.config.js中配置插件 const HTMLPlugin require("html-webpack-plugin&q…...

编程日记 2023/9/23 13:31:31

图像处理与计算机视觉--第一章-计算机视觉简介-10问

第一章-计算机视觉简介-10问 1.CV与AI的关系是什么? CV(Computer Vision)是Al的子领域&#xff0c;它致力于使计算机能够理解和解释图像和数据&#xff0c;CV借助AI技术&#xff0c;比如深度学习/机器学习&#xff0c;实现目标识别,分析和处理任务。AI提供了CV所需要的算法…...

编程日记 2023/9/23 13:30:30

LeetCode 80. 删除有序数组中的重复项 II

文章目录 一、题目二、Java 题解 一、题目 给你一个有序数组 nums&#xff0c;请你 原地 删除重复出现的元素&#xff0c;使得出现次数超过两次的元素只出现两次 &#xff0c;返回删除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须在 原地 修改输入数组 并在使用…...

编程日记 2023/9/23 13:27:28

【前端面试题】浏览器面试题

文章目录 前言一、浏览器面试问题1.cookie sessionStorage localStorage 区别2.如何写一个会过期的localStorage&#xff0c;说说想法2.如何定时删除localstorage数据2.localStorage 能跨域吗2.memory cache 如何开启2.localstorage的限制2.浏览器输入URL发生了什么2.浏览器如何…...

编程日记 2023/9/23 13:25:27

PHP 生成 PDF文件

参考官网 Example 009 : Image() TCPDF laravel 可以使用 composer 安装 tecnickcom/tcpdf 进行使用 //require_once("../app/Extend/tcpdf/tcpdf.php"); $pdf new TCPDF();// 设置文档信息$pdf->SetCreator(懒人开发网);$pdf->SetAuthor(懒人开发网);$…...

编程日记 2023/9/23 13:22:24

讲讲项目里的仪表盘编辑器（一）

需求 要做一个仪表盘系统&#xff0c;要求有&#xff1a; ① 设计功能&#xff08;包括布局、大小、排列&#xff09; ② 预览功能 ③ 运行功能 布局选择 做编辑器&#xff0c;肯定要先选择布局。 前端有几种常用布局。 静态布局 也叫文档布局。默认的网页形式…...

编程日记 2023/9/23 13:19:20

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

编程新知 2026/1/24 14:59:08

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2026/1/26 21:57:45

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

编程新知 2026/1/25 9:08:41

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

编程新知 2026/2/6 1:18:56

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

编程新知 2025/11/8 16:42:13

Ubuntu Cursor升级成v1.0

0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开&#xff0c;快捷键也不好用&#xff0c;当看到 Cursor 升级后&#xff0c;还是蛮高兴的 1. 下载 Cursor 下载地址&#xff1a;https://www.cursor.com/cn/downloads 点击下载 Linux (x64) &#xff0c;…...

编程新知 2026/2/4 16:04:11

Vue 模板语句的数据来源

&#x1f9e9; Vue 模板语句的数据来源&#xff1a;全方位解析 Vue 模板&#xff08;<template> 部分&#xff09;中的表达式、指令绑定&#xff08;如 v-bind, v-on&#xff09;和插值&#xff08;{{ }}&#xff09;都在一个特定的作用域内求值。这个作用域由当前 组件…...

编程新知 2026/2/1 6:18:18

Xela矩阵三轴触觉传感器的工作原理解析与应用场景

Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知&#xff0c;帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量&#xff0c;能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度&#xff0c;还为机器人、医疗设备和制造业的智…...

编程新知 2026/2/6 12:27:51

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...

编程新知 2026/1/22 5:35:24