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

2023-09-18 23:20: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"
        }
    }
}

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

更多推荐

景联文科技:数据供应商在新一轮AI热潮中的重要性

景联文科技是AI基础行业的头部数据供应商,可协助人工智能企业解决整个人工智能链条中数据标注环节的相对应问题。随着全球新一轮AI热潮来袭,大量训练数据已成为推动AI算法模型进步和演化的不可或缺的重要因素。数据的质量和数量直接影响了模型训练和性能优化的效果,高质量的AI数据有助于提升人工智能应用的服务能力。根据相关统计资料

LaTeX中的积分符号

这里写自定义目录标题一般的积分符号如何输出数值的积分符号?**cmupint**包**stix**包**esint**包其它包一般的积分符号LaTeX\LaTeXLATE​X中可以直接输入\int来得到积分符号,如果要用定积分则使用\int_{a}^{b}。语法输出\intint_{a}^{b}\iint\iint\l

2024年天津专升本文化课考试语文基础考试大纲(2023年9月修订)

天津市高等院校“高职升本科”招生统一考试语文基础考试大纲(2023年9月修订)一、考试性质天津市高等院校“高职升本科”招生统一考试是由合格的高职高专毕业生参加的选拔性考试。高等院校根据考生的成绩,按照已确定的招生计划,择优录取。因此,考试应该具有较高的信度、效度、适当的难度和必要的区分度。二、考试内容与基本要求(一)能

华为HC2023 专题演讲:openGauss 内核架构双引擎,全新打造数据底座

华为全联接大会2023专题演讲:openGauss内核架构双引擎,全新打造数据底座2023年9月22日14:00-15:40(UTC+08:00)上海世博中心430openGauss5.1(Preview)版的最新技术分享社区、技术、商业、生态等最新进展与数据库大咖共探数据库技术与前沿未来精彩议程14:00-14:10

LeetCode 394. 字符串解码

题目链接力扣(LeetCode)官网-全球极客挚爱的技术成长平台题目解析使用栈来很好的解决每一个中括号(包含前边的数字)的重复插入问题。我们首先创建一个栈,栈中的数据是一个个的键值对{count,ans.size()};分别是当前字符串重复的次数,和当前字符串在ans的其实下标。ans代表的是遍历到当前字符的正确答案。

【ES6知识】Iterator迭代器与 class类

文章目录一、Iterator迭代器1.1基础知识概述1.2工作原理1.3Symbol.iterator1.4Generator函数来实现Symbol.iterator接口二、ES6Class类2.1概述2.2ES6中的继承2.3面向对象应用-React一、Iterator迭代器1.1基础知识概述迭代器(Iterator

小节9:Python之numpy

numpy全称为NumericalPython,是很多数据或科学相关Python包的基础。1、numpy数组(NDarrayN维数组)numpy数组是更适合数据分析的列表。numpy的数组和Python的内置列表有相似之处,也有不同之处。相似之处:我们都可以通过索引去获得某个元素,可以通过切片获得某个范围的多个元素,也

Excel中的宏、VBA

一、宏是什么?EXCELMACRO是一种记录和播放工具,它仅记录您的Excel步骤,并且宏将根据需要播放任意多次。VBA宏可自动执行重复任务,从而节省了时间。这是一段可在Excel环境中运行的编程代码,但您无需成为编码器即可对宏进行编程。但是,您需要VBA的基础知识才能在宏中进行高级修改。作为人类,我们是习惯的产物。我

C/C++计算分数的浮点数值 2019年12月电子学会青少年软件编程(C/C++)等级考试一级真题答案解析

目录C/C++计算分数的浮点数值一、题目要求1、编程实现2、输入输出二、解题思路1、案例分析三、程序代码四、程序说明五、运行结果六、考点分析C/C++计算分数的浮点数值2019年12月C/C++编程等级考试一级编程题一、题目要求1、编程实现两个整数a和b分别作为分子和分母,既分数a/b,求它的浮点数值(双精度浮点数,保

blog--1 hugo环境

静态博客框架jekyll、hexo和hugo三者之间的区别与差异博客生成器?全名为静态网站生成器,可在任意拥有主机功能的环境下寄存(托管)可直接配合域名进行全球访问劣势:每次更新网页必须重新生成整个网站编译速度(单位:秒)Jekyll:15.90Hugo:4.90Hexo的数据应当介于二者之间。environmentJ

【数学建模】2023华为杯研究生数学建模F题思路详解

强对流降水临近预报我国地域辽阔,自然条件复杂,因此灾害性天气种类繁多,地区差异大。其中,雷雨大风、冰雹、龙卷、短时强降水等强对流天气是造成经济损失、危害生命安全最严重的一类灾害性天气[1]。以2022年为例,我国强对流天气引发风雹灾害造成的死亡失踪人数和直接经济损失分别占73%和69%。由于强对流天气具有突发性和局地性

热文推荐