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

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

news 2026/3/27 17:50:35

在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

ENVI 5.3波谱库实战：从自带库浏览到自定义库创建，遥感地物识别效率翻倍

ENVI 5.3波谱库实战&#xff1a;从自带库浏览到自定义库创建&#xff0c;遥感地物识别效率翻倍 在遥感图像解译工作中&#xff0c;地物波谱特征就像每类物质的"光学指纹"。ENVI 5.3的波谱库功能&#xff0c;正是帮助我们从海量遥感数据中快速匹配这些"指纹"…...

编程新知 2026/3/27 17:23:56

用CODrone数据集训练YOLOv8-OBB：手把手教你搞定无人机旋转目标检测模型

从CODrone到YOLOv8-OBB&#xff1a;实战无人机旋转目标检测全流程指南 无人机航拍视角下的目标检测一直是计算机视觉领域的难点——倾斜视角带来的目标旋转、飞行高度变化导致的尺度差异、复杂背景干扰等问题&#xff0c;让传统水平框检测方法捉襟见肘。本文将带您完整实现从CO…...

编程新知 2026/3/27 15:35:02

目前专业的LED数码管屏厂商哪家好

在现代显示技术领域&#xff0c;LED数码管屏因其高亮度、低功耗和长寿命等特点&#xff0c;广泛应用于各种电子设备中。选择一家专业的LED数码管屏厂商至关重要。本文将为您推荐几家市场上表现突出的厂商&#xff0c;并进行详细对比。1. 杭州斡能电子有限公司公司简介&#xff…...

编程新知 2026/3/27 14:26:27

课堂教学质量综合评分系统

目录 一、项目环境与目录结构 1. 环境要求 2. 推荐目录结构 二、核心类设计&#xff1a;ClassroomScorer 三、关键代码深度解析 1. 基础路径配置 2. 初始化方法&#xff1a;极致灵活的配置 3. 上下文管理器&#xff1a;统一封装 CSV 读取 4. 数据加载&#xff1a;4 类 …...

编程新知 2026/3/27 14:18:19

wan2.1-vae提示词评估体系：构建BLEU-Style指标量化中文提示词有效性

wan2.1-vae提示词评估体系&#xff1a;构建BLEU-Style指标量化中文提示词有效性 1. 为什么需要评估提示词质量 在AI图像生成领域&#xff0c;提示词的质量直接影响最终生成效果。好的提示词能准确表达创作意图&#xff0c;而模糊或不当的提示词可能导致生成结果与预期不符。特…...

编程新知 2026/3/27 12:28:47

5分钟掌握游戏高清截图秘诀：SRWE窗口分辨率自定义完整教程

5分钟掌握游戏高清截图秘诀&#xff1a;SRWE窗口分辨率自定义完整教程 【免费下载链接】SRWE Simple Runtime Window Editor 项目地址: https://gitcode.com/gh_mirrors/sr/SRWE 你是否曾梦想为心爱的游戏角色拍摄一张高清壁纸&#xff0c;却发现游戏分辨率选项有限&…...

编程新知 2026/3/27 11:09:53

质子交换膜燃料电池Comsol完整版仿真模型：涵盖两相流非等温雾状流道、液态水相变及扩散项，考...

质子交换膜燃料电池仿真Comsol完整版 虽然氢电发文量多了&#xff0c;但是氢电模型复杂程度和别的领域没法比&#xff0c;两相流非等温的氢燃料电池&#xff0c;跑通的都得好几千的&#xff0c;这个模型的流道和内侧都是多相流&#xff0c;这个里面是雾状流的流道&#xff0c;目…...

编程新知 2026/3/27 11:09:53

s2-pro部署实操：CSDN平台GPU资源监控与s2-pro服务性能关联分析

s2-pro部署实操&#xff1a;CSDN平台GPU资源监控与s2-pro服务性能关联分析 1. 专业语音合成工具s2-pro简介 s2-pro是Fish Audio开源的专业级语音合成模型镜像&#xff0c;它能够将文本转换为自然流畅的语音&#xff0c;并支持通过参考音频来复用特定音色。这个工具特别适合需…...

编程新知 2026/3/27 11:01:52

告别“人工智障”！OpenClaw + 大模型：打造真正能“看懂、想通、干成”的机械臂智能体

写在前面 在机器人圈子里&#xff0c;有个心照不宣的痛点&#xff1a;机械臂越来越便宜&#xff0c;但让它“听话”却越来越难。 传统的示教编程&#xff08;Teaching Pendant&#xff09;太慢&#xff0c;改个产品就得重教一遍&#xff1b;视觉定位&#xff08;Vision Guided&…...

编程新知 2026/3/27 9:51:18

NSC_BUILDER：Switch游戏文件管理的全能解决方案

NSC_BUILDER&#xff1a;Switch游戏文件管理的全能解决方案 【免费下载链接】NSC_BUILDER Nintendo Switch Cleaner and Builder. A batchfile, python and html script based in hacbuild and Nuts python libraries. Designed initially to erase titlerights encryption fro…...

编程新知 2026/3/27 9:51:18