浏览器精确定位调用高德地图定位

上方是正常定位后的示例图。首先需要先注册一个高德地图账号及生成相关的秘钥，下面是相关代码

<!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"><title>浏览器精确定位</title><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /><style>html,body,#container{height:100%;}.info{width:26rem;}</style>
<body>
<div id='container'></div>
<div class="info"><h4 id='status'></h4><hr><p id='result'></p><hr><p >由于众多浏览器已不再支持非安全域的定位请求，为保位成功率和精度，请升级您的站点到HTTPS。</p>
</div><script src="jquery.min.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=自己的秘钥"></script>
<script type="text/javascript">var map = new AMap.Map('container', {resizeEnable: true});AMap.plugin('AMap.Geolocation', function() {var geolocation = new AMap.Geolocation({enableHighAccuracy: true,//是否使用高精度定位，默认:truetimeout: 10000,          //超过10秒后停止定位，默认：5sbuttonPosition:'RB',    //定位按钮的停靠位置buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点});map.addControl(geolocation);geolocation.getCurrentPosition(function(status,result){if(status=='complete'){onComplete(result)}else{onError(result)}});});//解析定位结果function onComplete(data) {document.getElementById('status').innerHTML='定位成功'var str = [];str.push('定位结果：' + data.position);str.push('定位类别：' + data.location_type);if(data.accuracy){str.push('精度：' + data.accuracy + ' 米');}//如为IP精确定位结果则没有精度信息str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));document.getElementById('result').innerHTML = str.join('<br>');//默认获取当前位置经纬度，之后再根据经纬度 定位具体位置regeo(data.position);}//解析定位错误信息function onError(data) {document.getElementById('status').innerHTML='定位失败'document.getElementById('result').innerHTML = '失败原因排查信息:'+data.message;}//根据经纬度获取当前位置信息function regeo(ipAddress) {$.ajax({type: "get",dataType: "json",url: "https://restapi.amap.com/v3/geocode/regeo?output=JSON&location="+ipAddress+"&key=自己的秘钥&radius=100&extensions=all",success: function(result){console.log(result);//当前位置信息var clickPois = result.regeocode.pois[0];//当前位置区域信息var clickAddressComponent = result.regeocode.addressComponent;var nameAddress =  clickAddressComponent.district+ " " + clickAddressComponent.township + clickPois.name;console.log(clickAddressComponent);console.log(nameAddress);}});}
</script>
</body>
</html>

浏览器精确定位调用高德地图定位相关推荐

vue调用高德地图实现定位
vue调用高德地图实现定位第一步创建高德地图key 第二步:下载vue-amap npm install vue-amap --save 第三步:在项目main.js引入vue-amap impor ...
高德地图定位demo
最近做了高德地图定位的case,把一些经历写了下来,方便以后用到 <script type="text/javascript" src="http://webapi ...
Cordova高德地图定位、ionic2/3/4高德地图定位（解决部分国产手机无法定位的情况）
高德地图定位 (2.0.5版本) 插件环境 cordova-android >= 7.0.0 清晰的文档请看:点击转到github文档 1.申请密钥请参照: 申请android密钥定位SDK ...
ios 持续获取定位高德地图_概述-iOS 定位SDK | 高德地图API
简介高德 iOS 定位 SDK 提供了不依赖于地图定位的定位功能,开发者可以无地图显示的场景中便捷地为应用程序添加定位功能. iOS定位SDK提供了单次定位.连续定位.逆地理信息.地理围栏等功能. ...
flutter 获取定位_从头开发一个Flutter插件（二）高德地图定位插件
在上一篇文章从头开发一个Flutter插件(一)开发流程里具体介绍了flutter插件的具体开发流程,从创建项目到发布.接下来将会为Flutter天气项目开发一个基于高德定位sdk的flutter定位 ...
安卓开发高德地图定位的封装十分钟上手
前言地图作为开发中三方sdk中较常遇到的一项,集成起来并不麻烦但是不小心踩坑可能会浪费较多时间,如果项目中多处使用还容易造成代码大量冗余,今天我们来将高德地图定位功能集成一个功能化模块,只需两分钟应 ...
Android MVVM框架搭建（八）高德地图定位、天气查询、BottomSheetDialog
Android MVVM框架搭建(八)高德地图定位.天气查询.BottomSheetDialog 前言正文一.集成SDK 二.基础配置 ① 权限配置 ② 配置Key 三.显示地图 ① MapFra ...
ios 高德获取定位_更新日志-iOS 定位SDK | 高德地图API
高德地图iOS 定位 SDK V2.6.7 2020-08-28 1.适配iOS14定位权限:新增"模糊定位"权限下的兼容策略: 2.修复bug,提升性能和稳 ...
ios 高德获取定位_概述-iOS 定位SDK | 高德地图API
简介高德 iOS 定位 SDK 提供了不依赖于地图定位的定位功能,开发者可以无地图显示的场景中便捷地为应用程序添加定位功能. iOS定位SDK提供了单次定位.连续定位.逆地理信息.地理围栏等功能. ...

浏览器精确定位调用高德地图定位

浏览器精确定位调用高德地图定位相关推荐

最新文章

热门文章

浏览器精确定位 调用高德地图定位

浏览器精确定位 调用高德地图定位相关推荐

最新文章

热门文章

浏览器精确定位调用高德地图定位

浏览器精确定位调用高德地图定位相关推荐