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

在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"}}
}

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/85860.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【matlab程序】海图单位的度分格式

【matlab程序】海图单位的度分格式 海洋与大气科学 点击蓝字 关注我们 思路来源 阅读文献&#xff1a; 文献中图片的横纵坐标出现半分画法&#xff1a; 半分画法&#xff0c;甚至更为精细的坐标轴在小区域研究中更为重要。 图片 图片 01 一度间隔 图片 代码 % 01 运…

2023 第十二届中国智能产业高峰论坛 - 文档大模型的未来展望

目录 前言文档图像分析识别与理解中的技术挑战 文档图像分析识别与理解的研究主题文档图像分析与预处理文档解析与识别版面分析与还原文档信息抽取与理解AI安全知识化&存储检索和管理 多模态大模型在文档图像处理中的应用多模态的GPT-4在文档图像上的表现多模态的Google Ba…

Ubuntu中无法git clone,一直连接不上的解决方法

我的环境 我的电脑是Windows的&#xff0c;CFW也装在Windows中。 解决思路 其实能ping通google就能git clone。 解决步骤 在CFW主页中安装服务模式打开TUN模式重启Ubuntu能ping通了

基因组注释(Annotation)

基因组组装完成后&#xff0c;或者是完成了草图&#xff0c;就不可避免遇到一个问题&#xff0c;需要对基因组序列进行注释。注释之前首先得构建基因模型&#xff0c;有三种策略&#xff1a; 从头注释(de novo prediction)&#xff1a;通过已有的概率模型来预测基因结构&#…

Java实验案例(一)

目录 案例一&#xff1a;买飞机票 案例二&#xff1a;开发验证码 案例三&#xff1a;评委打分 案例四&#xff1a;数字加密 案例五&#xff1a;数组拷贝 案例六&#xff1a;抢红包 案例七&#xff1a;找素数的三种方法 案例八&#xff1a;打印乘法口诀表 案例九&#x…

【360秋招笔试】编程题第二题:修改Web(C++的AC解法)

题目 先看样例&#xff1a; 6 1612*3 7*8*954 11122 4*6222 15712 11115n表示输入n行数据&#xff0c;下面每一行数据表示一个等式。如果能满足 在等式中添加任意一个数字 使得等式两边成立&#xff0c;则输出Yes&#xff0c;否则输出No。如果等式本来就相等&#xff0c;也输…

大厂面试-16道面试题

1 java集合类有哪些&#xff1f; List是有序的Collection&#xff0c;使用此接口能够精确的控制每个元素的插入位置&#xff0c;用户能根据索引访问List中元素。常用的实现List的类有LinkedList&#xff0c;ArrayList&#xff0c;Vector&#xff0c;Stack。 ArrayList是容量…

每日一题 198打家劫舍(动态规划)

题目 198题目 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚上被小偷闯入&#xff0c;系统会自动报警。 给定一个代表每个…

某度sign参数逆向

文章目录 前文分析完整代码结尾 前文 本文章中所有内容仅供学习交流&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff0c;若有侵权&#xff0c;请联系我立即删除&#xff01; 分析 经过我们几次抓包&#xff0c;测试&#xf…

解决jupyter打开的默认路径问题

已经安装完anaconda&#xff0c;但是jupyter每一次打开的路径都不是自己想要的路径&#xff0c;可以在配置文件中修改jupyter打开的默认路径&#xff0c;具体步骤如下&#xff1a; 首先打开anaconda的命令行 如果有多个环境的&#xff0c;需要输入conda activate 环境名称以下命…

list容器排序案例

案例描述:将Perspn自定义数据类型进行排序&#xff0c;Person中属性有姓名、年龄、身高 排序规则:按照年龄进行升序&#xff0c;如果年龄相同按照身高进行降序 代码示例 #include <iostream> #include <string.h> #include <iterator> #include <vector…

资讯| 工信部拟筹建元宇宙标准化工作组;《权游》作者起诉OpenAI

元宇宙赛道 工信部&#xff1a;优先开展“元宇宙 工业制造”等行业应用标准研制 9月18日&#xff0c;工业和信息化部科技司就《工业和信息化部元宇宙标准化工作组筹建方案&#xff08;征求意见稿&#xff09;》&#xff08;以下简称《方案》&#xff09;公开征求意见。 工业…

小程序搜索词优化:小陈运营的秘密武器

大家好&#xff0c;我是小陈&#xff0c;今天要和大家分享一下小程序搜索词优化的经验和技巧。在数字化时代&#xff0c;小程序已经成为许多企业的重要工具&#xff0c;但要让小程序在竞争激烈的市场中脱颖而出&#xff0c;搜索词优化是不可或缺的一环。在本文中&#xff0c;我…

【C++面向对象侯捷】12.虚函数与多态 | 13.委托相关设计【设计模式 经典做法,类与类之间关联起来,太妙了,不断的想,不断的写代码】

文章目录 12.虚函数与多态举例&#xff1a;委托 继承【观察者模式】13.委托相关设计Composite 组合模式Prototype 原型模式 12.虚函数与多态 纯虚函数 一定要 子类重新定义的 继承和复合 关系下的构造和析构 举例&#xff1a;委托 继承【观察者模式】 13.委托相关设计 问题…

云原生安全性:保护现代应用免受威胁

文章目录 引言云原生安全性的挑战云原生安全性的关键实践1. 安全的镜像构建2. 网络策略3. 漏洞扫描和漏洞管理4. 认证和授权5. 日志和监控 云原生安全工具结论 &#x1f389;欢迎来到云计算技术应用专栏~云原生安全性&#xff1a;保护现代应用免受威胁 ☆* o(≧▽≦)o *☆嗨~我…

详解Python的__new__()方法

__new__与__init__的区别 new() 方法主要存在于Python2的新式类和Python3中。它是负责创建类实例的静态方法。 当Python实例化一个对象时&#xff0c;首先调用__new__()方法构造一个类的实例&#xff0c;并为其分配对应类型的内存空间&#xff0c;该实例的内存地址就是它的唯一…

科目二倒车入库

调整座位和后视镜 离合踩到底大腿小腿成130-140 上半身90-100 座椅高度能看到前方全部情况 后视镜调节到能看到后门把手&#xff0c;且后门把手刚好在后视镜上方边缘、离车1/3处。 保持直线&#xff1a; 前进&#xff1a; 车仪表盘中央的原点和地面上的黄线擦边&#xff…

Docker CMD指令如何覆写

在Dockerfile里,CMD指令是可以被覆盖的。 在构建镜像时,可以通过docker build命令的–cmd选项覆盖Dockerfile的CMD: 例如: FROM ubuntu CMD ["echo","hello"]构建时覆盖CMD: docker build -t test --cmd "echo world" .在创建容器时,可以通过…

【AI视野·今日NLP 自然语言处理论文速览 第三十八期】Thu, 21 Sep 2023

AI视野今日CS.NLP 自然语言处理论文速览 Thu, 21 Sep 2023 Totally 57 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers Chain-of-Verification Reduces Hallucination in Large Language Models Authors Shehzaad Dhuliawala, Mojt…

PyTorch深度学习实战(17)——多任务学习

PyTorch深度学习实战&#xff08;17&#xff09;——多任务学习 0. 前言1. 多任务学习1.1 多任务学习基本概念1.2 多任务学习优势 2. 模型与数据集分析2.1 模型分析2.2 数据集介绍 3. 实现年龄估计和性别分类小结系列链接 0. 前言 多任务学习( Multi-Task Learning, MTL )是一…