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

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

news 2026/2/6 22:43:03

在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

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2026/2/5 16:10:08

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

编程新知 2026/2/4 3:14:18

MySQL 8.0 OCP 英文题库解析（十三）

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

编程新知 2026/1/31 7:25:57

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

编程新知 2026/2/1 22:51:12

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...

编程新知 2026/2/6 15:56:54

return this；返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

编程新知 2026/1/28 21:45:43

AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

编程新知 2026/2/5 18:58:39

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

编程新知 2026/1/29 5:24:50

省略号和可变参数模板

本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...

编程新知 2025/11/21 0:25:40

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

编程新知 2026/2/2 0:52:30