前端获取用户经纬度

1.通过浏览器自带的api

if(navigator.geolocation){
  navigator.geolocation.getCurrentPosition(geoSuccess, geoError)
}else{
   alert('浏览器不支持地理定位。')
 }

2.处理成功逻辑

function geoSuccess(position) {
    var lat = position.coords.latitude
    var lng = position.coords.longitude
}

3.处理失败逻辑

geoError(error) {
   switch (error.code) {
      case error.PERMISSION_DENIED:
           return alert('定位失败,用户拒绝请求地理定位')
      case error.POSITION_UNAVAILABLE:
           return alert('定位失败,位置信息是不可用')
                    case error.TIMEOUT:
                        return alert('定位失败,请求获取用户位置超时')
                    case error.UNKNOWN_ERROR:
                        return alert('定位失败,定位系统失效')
                }
            }

注意: 这个获取并不稳定,也不怎么准确,唯一的优点就是方便。

获取到经纬度之后, 可以通过调用 百度高德的 api (需注册申请) 获取到用户具体的位置

电脑浏览器很多都不行,反正我的chorme浏览器不行。手机上大部分可以识别到。

另外可以增加配置,设置超时时间,具体可以通过

https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation/getCurrentPosition

了解

### 使用高德地图API在前端JavaScript获取当前位置的经纬度 为了实现在前端使用高德地图API获取用户的当前位置经纬度,开发者需先完成必要的准备工作。这包括注册成为高德开放平台用户并获得相应的API Key[^4]。 一旦拥有了有效的API Key,就可以按照如下方式编写代码: #### 初始化地图与定位服务 首先,在HTML文件中引入高德地图所需的JavaScript库: ```html <script src="https://webapi.amap.com/maps?v=2.0&key=您的Key"></script> ``` 随后利用下面这段JavaScript代码片段来请求浏览器访问设备的位置信息,并借助高德的地图服务将其转换为具体的地理坐标(即经度和纬度)[^5]。 ```javascript // 创建地图实例 var map = new AMap.Map('container', { zoom: 13, }); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position){ let lat = position.coords.latitude; let lng = position.coords.longitude; console.log(`Latitude is ${lat}, Longitude is ${lng}`); // 设置中心点 map.setCenter([lng, lat]); // 添加标记 var marker = new AMap.Marker({ position: new AMap.LngLat(lng,lat), title:'您所在的位置' }); map.add(marker); },function(){ alert("因隐私设置等原因无法获取到位置"); },{timeout:7000}); } else { alert("浏览器不支持地理定位."); } ``` 上述代码实现了当页面加载完成后自动尝试读取用户的地理位置数据,并将这些数据显示在一个预先准备好的地图容器内。如果成功获得了位置,则会在控制台打印出该地点对应的经纬度值,并且在地图上标注此位置;反之则会给出提示告知用户未能取得其确切位置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值