原生js获取地理位置（包括操作方式从零到一）

小苏酱ovo

已于 2024-03-14 19:07:54 修改

阅读量729

点赞数 8

文章标签： javascript okhttp 开发语言

于 2024-03-13 16:53:47 首次发布

本文链接：https://blog.csdn.net/liyixuanstay/article/details/136673012

版权

本文详细介绍了如何使用原生JavaScript结合高德地图API获取用户的地理位置，包括注册开发者账号、创建应用、获取密钥以及调用API获取经纬度并进行地址编码的过程。

摘要由CSDN通过智能技术生成

原生js获取地理位置（包括操作方式从零到一）

1.首先浏览器搜索高德地图开放平台
在这里插入图片描述

2.点击红框有账号就登录，没账号就注册
在这里插入图片描述

3.登录完以后接着点击控制台
在这里插入图片描述

4.点击控制台可能要认证开发者，自己选择合适自己的认证方式就可以，认证完成以后的页面是这样的，然后点击应用管理>我的应用>创建新应用
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/1f5f36374fe941fc9adbdfc9c0579d01.png

5.创建完应用以后点击添加key
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/b48c4c7526a74ef183ba47a47df31e8f.png
6.然后在弹框里勾选web端，填写key名称提交即可

7.然后你会看到页面会有你添加的key和密钥；复制你的key和密钥用于接下来的代码使用

8.使用代码

 <script src="./jquery-3.7.1.min.js"></script> //这里我引入了jquery库，主要用于请求
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: '你的高德应用密钥',
        }
    </script>
        <script type="text/javascript"
        src='https://webapi.amap.com/maps?v=1.4.11&key=你的高德keykey&plugin=AMap.Geolocation,AMap.Geocoder'></script>

9.调用api接口获取ip地址及获取地理位置

 <script>
 $.ajax({
            url: "https://api.ipify.org/?format=json",
            dataType: "json",
            success: function (data) {
                var ip = data.ip;
                $.ajax({
                    url: "https://ipapi.co/" + ip + "/json/",
                    dataType: "json",
                    success: function (data) {
                        var latitude = data.latitude;
                        var longitude = data.longitude;
                        let position = [longitude, latitude] //位置的经纬度 
                        new AMap.plugin("AMap.Geocoder", () => {
                            const geocoder = new AMap.Geocoder({
                                // city 指定进行编码查询的城市，支持传入城市名、adcode 和           citycode
                                //   city: "028" //成都
                            });
                            geocoder.getAddress(position, (status, result) => {
                                if (status === "complete" && result.info === "OK") {
                                    // result为对应的地理位置详细信息
                                    console.log(result.regeocode.addressComponent.province+'-'+result.regeocode.addressComponent.city+'-'+result.regeocode.addressComponent.district)
                                }
                            });
                        });
                    }
                });
            }
        });