高德地图API(使用浏览器ip实现精确定位)
文章目录
高德地图API(使用浏览器ip实现精确定位)一、关于JSAPI二、注册高德地图API三、接入API（代码）一、关于JSAPI
地图 JSAPI 2.0 是高德开放平台免费提供的第四代 Web 地图渲染引擎， 以 WebGL 为主要绘图手段，本着“更轻、更快、更易用”的服务原则，广泛采用了各种前沿技术，交互体验、视觉体验大幅提升，同时提供了众多新增能力和特性。
二、注册高德地图API
具体注册步骤参考js接入高德地图API（简单快速上手）
三、接入API（代码）
<!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>使用浏览器ip实现精确定位</title><link rel="stylesheet" href="/jsapi_demos/static/demo-center/css/demo-center.css" /><style>html,body,#container{height:100%;}.info{width:26rem;}</style></head><body><div id="container"></div><div class="info"><h4 id="status"></h4><hr><p id="result"></p><hr><p >由于众多浏览器已不再支持非安全域的定位请求，为保位成功率和精度，请升级您的站点到HTTPS。</p></div><!-- 配置安全密钥,自12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用 --><script type="text/javascript">window._AMapSecurityConfig = {securityJsCode:'您的安全密钥',}</script><script type="text/javascript" src="/maps?v=2.0&key=申请的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秒后停止定位，默认：5sposition:'RB', //定位按钮的停靠位置offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点});map.addControl(geolocation);//result中包含浏览器ip地址等信息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>');}//解析定位错误信息function onError(data) {document.getElementById('status').innerHTML='定位失败'document.getElementById('result').innerHTML = '失败原因排查信息:'+data.message+'</br>浏览器返回信息：'+data.originMessage;}</script></body></html>
更多示例参考JS API 2.0 示例
