高德授权获取当前位置及经纬度

原创 已于 2022-08-19 11:37:20 修改 · 5.5k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#高德获取当前地址 #高德授权获取地址 #高德获取经纬度

于 2018-08-30 11:24:47 首次发布
这篇博客介绍了如何利用高德地图API获取用户的当前位置和经纬度。通过引入高德地图脚本，创建地图对象，并使用AMap.Geolocation插件进行定位。在用户授权后，获取到的定位信息包括经纬度、精度范围、定位来源、状态信息和地址，并在页面上显示。当定位失败时，提供了错误处理函数。

1、效果样式

2、引入  

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=自己的key值"></script>

3、html  js

<body>

<div id="map"></div>

<span id="addr">当前地址为：</span>

<script type="text/javascript">
    var mapObj = new AMap.Map('map');
    mapObj.plugin('AMap.Geolocation', function () {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, // 是否使用高精度定位，默认:true
            timeout: 10000,           // 超过10秒后停止定位，默认：无穷大
            maximumAge: 0,            // 定

最低0.47元/天 解锁文章

200万优质内容无限畅学
javaWeb 地图定位插件 高德地图定位 基于浏览器
老辣姜香的博客
01-07 6302
浏览器定位 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=16d0f1984a0d9c7cabee09c3c7e07d5d"> html { height: 100% }
微信小程序调用高德api定位当前经纬度，根据城市名获取对应经纬度
weixin_42479305的博客
01-06 4889
最近写小程序有一个首页关于定位功能，指定高德API，话不多说，上图： 首先小程序需要先设置定位提示语，在mainfest.json中添加配置scope.userLocation： "mp-weixin" : { "appid" : "xxxxxxxxxxx", "setting" : { "urlCheck" : true, "es6" : false, "minified" : true,
高德地图获取经纬度
03-28
里面包含根据具体的位置信息获取经纬度，显示在地图上，//添加标注 //创建地图 //地图中心点添加标注 //地理编码返回结果展示
使用高德Api获取当地天气信息
qq_37004501的博客
06-30 925
摘要：高德地图API提供获取天气数据的功能，开发者需先申请API Key，然后通过IP定位接口获取城市编码(adcode)，再调用天气查询接口获取具体天气信息。示例返回结果为"长春，小雨，24℃，西风≤3级，空气湿度97"。该API可实现基于位置的天气查询服务。
高德地图怎么获取用户当前的经纬度
2403_83968823的博客
03-28 284
精准定位一直报错，粗糙定位误差太大。
如何准确获取地点位置的经纬度？（高德）
qq_47902937的博客
03-05 1万+
使用高德地图api的坐标拾取器 地址：https://lbs.amap.com/tools/picker。在高德地图搜索选择地址 高德网址：https://www.amap.com/搜索想要的位置地址例如我搜索的是成都市金牛区。按下回车键就可以看见经纬度了。复制去新的浏览器网页。
高德地图API-获取位置信息的经纬度
热门推荐
12程序猿的博客
08-15 2万+
高德地图API-获取位置信息的经纬度
uni-app微信小程序如何使用高德地图。通过经纬度获取所在城市，涉及到授权获取地理位置权限
肖肖肖丽珠的博客
10-25 3520
如果在vue3项目种我们通过var amapFile = require('@/js_sdk/amap/amap-wx.130.js');location: '' + longitude + ',' + latitude + '',//location的格式为'经度,纬度'console.log('经度：' + res.longitude);console.log('纬度：' + res.latitude);fail: () => { //这里是用户拒绝授权后的回调。把他放到自己的项目里面。
Taro授权定位以及高德地图逆地理编码(经纬度转地址)
lullre的博客
11-22 930
Taro授权定位以及高德地图逆地理编码(经纬度转地址)
pc端使用高德地图api获取当前位置的经纬度
weixin_45356397的博客
05-20 3246
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <title>地图测试文件</title> <style type="text/css"> #container {
高德地图获取当前定位信息
qq_26144233的博客
02-07 1960
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <tit.
高德地图获取经纬度（安卓）
08-26
只获取经纬度，按照说明集成进项目即可获取当时当地的经纬度。
高德地图根据经纬度获取详细地址
10-19
高德地图根据经纬度获取详细地址（js）。内无key，请自行使用自己的高德地图key
高德地图和百度地图获取当前位置经纬度
weixin_30505225的博客
12-17 889
高德 导入高德js mapObj = new AMap.Map('iCenter'); mapObj.plugin('AMap.Geolocation', function () { geolocation = new AMap.Geolocation({ enableHighAccuracy: true,//是否使用高精度定位，默认:true ti...
高德地图 API 拿到当前定位和目的地址转经纬度，实现路径规划
m0_63779088的博客
04-27 2316
高德地图 API是一个强大的工具，可以帮助我们在网页或应用中实现地图相关功能，比如定位、地址解析（将地址转为经纬度）以及路径规划（从当前位置到目的地的路线）。
高德定位-获取经纬度信息
我是我
07-14 2922
高德定位——获取经纬度信息 应用场景，在一个vue项目中，某个页面需要调取定位信息，来获取当前所处的经纬度，并根据这个经纬度传给后端，返回一个距离信息 使用过程： 第一步：在index.html中引入高德API <script type="text/javascript" src="//webapi.amap.com/maps?v=2.0&key=93ecd9f56d15d54c70623ae55c6ed128&plugin=AMap.CitySearch"></scrip
高德地图获取想要位置的经纬度
seimeii的博客
11-19 984
https://lbs.amap.com/console/… 这里可以获取想要位置的经纬度 var map = new AMap.Map('container', { resizeEnable: true, zoom:11, center: [104.060547,30.542073] // 四川省成都市高新区天府四街银泰城 坐标 }); ...
使用高德地图API批量获取地址对应的经纬度
hongyinvjianke的博客
03-13 1万+
利用高德地图API实现批量获取地址对应的经纬度
js获取当前位置经纬度
最新发布
09-04
<think> 我们被要求使用JavaScript获取当前位置的经纬度。根据引用[1]和引用[2]，我们可以使用浏览器的Geolocation API来实现。具体来说，navigator.geolocation对象提供了getCurrentPosition方法，该方法可以获取设备的当前位置。 步骤： 1. 检查浏览器是否支持Geolocation API（即检查navigator.geolocation是否存在）。 2. 调用navigator.geolocation.getCurrentPosition(successCallback, errorCallback)方法。 - successCallback：当获取位置成功时调用的函数，该函数接收一个position对象，其中包含经纬度信息（position.coords.longitude和position.coords.latitude）。 - errorCallback（可选）：当获取位置失败时调用的函数，接收一个error对象，可以根据error.code给出错误信息。 注意：获取位置需要用户授权。如果用户拒绝，则会在errorCallback中处理。 根据引用[1]和[2]的示例，我们可以编写如下代码： ```javascript function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( function (position) { // 获取成功 var lng = position.coords.longitude; var lat = position.coords.latitude; // 将经纬度保留6位小数，并组合成字符串 var site = lat.toFixed(6) + ',' + lng.toFixed(6); console.log('当前位置经纬度：', site); // 这里可以根据需要处理经纬度，比如显示在页面上或存储到变量中 }, function (error) { // 获取失败 var errorMessages = [ "您拒绝共享位置信息", // error.PERMISSION_DENIED "获取不到位置信息", // error.POSITION_UNAVAILABLE "获取位置信息超时" // error.TIMEOUT ]; console.log('错误：', errorMessages[error.code - 1]); // 注意：error.code是1,2,3，数组索引从0开始，所以减1 } ); } else { console.log("您的浏览器不支持地理位置定位。"); } } // 调用函数 getLocation(); ``` 说明： - 成功回调中，我们获取了经度(longitude)和纬度(latitude)，并格式化为6位小数。然后可以按需使用这些数据。 - 错误回调中，我们根据错误码（error.code）显示相应的错误信息。错误码对应的常量： - 1: PERMISSION_DENIED (用户拒绝授权) - 2: POSITION_UNAVAILABLE (无法获取位置信息) - 3: TIMEOUT (获取位置超时) 另外，引用[3]提到了在Vue中使用百度地图获取经纬度的方法，但用户当前需求是使用纯JavaScript，所以我们不展开。 注意：获取的经纬度坐标系可能是WGS84（国际标准，GPS使用）坐标系，但在国内地图（如高德、百度）使用时，可能需要转换。引用[2]中提到，通过浏览器获取的是火星坐标系（GCJ-02），但实际上，浏览器返回的坐标系取决于浏览器实现，通常是WGS84。然而，国内地图API可能需要火星坐标系或百度坐标系，因此可能需要转换。但用户问题只要求获取经纬度，所以这里只展示如何获取。 如果用户需要转换坐标系，可以使用相应地图API提供的转换方法，但这不是当前问题的重点。 总结：使用Geolocation API的getCurrentPosition方法可以获取当前位置经纬度。 §§相关问题§§ 1. 如何将获取的WGS84坐标转换为火星坐标（GCJ-02）或百度坐标（BD-09）？ 2. 获取位置信息时，如何设置超时时间等选项？ 3. 如何持续监听位置变化（例如在移动设备上）？ </think> ### JavaScript获取当前位置经纬度的实现方法 在JavaScript中获取设备当前位置的经纬度主要通过浏览器的**Geolocation API**实现。以下是具体实现步骤和代码示例： #### 核心实现代码 ```javascript function getCurrentLocation() { // 1. 检查浏览器是否支持Geolocation API if (navigator.geolocation) { // 2. 调用getCurrentPosition方法获取位置 navigator.geolocation.getCurrentPosition( // 成功回调函数 function(position) { // 获取经纬度（保留6位小数） const longitude = position.coords.longitude.toFixed(6); const latitude = position.coords.latitude.toFixed(6); console.log("当前位置：", longitude, latitude); // 后续处理（如显示在页面或发送到服务器） }, // 失败回调函数 function(error) { // 错误处理 const errorMessages = [ "用户拒绝位置授权", "无法获取位置信息", "请求位置超时" ]; console.error("定位失败：", errorMessages[error.code]); } ); } else { console.error("浏览器不支持地理位置功能"); } } // 调用函数 getCurrentLocation(); ``` #### 关键说明： 1. **权限要求**： - 浏览器会自动弹出位置授权请求（用户必须允许） - 需要在安全上下文（HTTPS）中运行，本地开发时`localhost`除外 2. **坐标系说明**： - 获取的坐标系为**WGS84**（标准GPS坐标） - 国内地图（高德/百度）需转换为火星坐标系（GCJ-02）[^2] 3. **精度控制**： - 通过`toFixed(6)`将经纬度保留6位小数（约0.1米精度） - 可通过`enableHighAccuracy`选项请求更高精度： ```javascript navigator.geolocation.getCurrentPosition(success, error, { enableHighAccuracy: true, // 高精度模式 timeout: 10000, // 10秒超时 maximumAge: 60000 // 缓存有效期60秒 }); ``` #### 框架集成示例（Vue）： ```javascript // 在Vue组件中 methods: { getLocation() { navigator.geolocation.getCurrentPosition(position => { this.longitude = position.coords.longitude; this.latitude = position.coords.latitude; console.log("当前位置：", this.longitude, this.latitude); }, error => { console.error("定位失败", error); }); } } ``` > **注意**：移动设备需开启GPS/WiFi定位服务，PC浏览器定位精度依赖IP定位[^1]。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值