注意：使用此API的时，放到服务器时的访问链接一定要是HTTPS的········当然本地测试的时候木有任何问题，下边的代码时直接复制可用的····
1.高德地图---获取定位（经纬度）
<!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> --> <p >定位精度存在微小距离的误差，为保证工作人员及时准确的赶到，请在此地域稍候~~~</p> </div> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&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,//是否使用高精度定位，默认:true timeout: 10000, //超过10秒后停止定位，默认：5s buttonPosition:'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>'); y=data.position.lat; x=data.position.lng; alert("经纬度"+x+","+y); } //解析定位错误信息 function onError(data) { document.getElementById('status').innerHTML='定位失败' document.getElementById('result').innerHTML = '失败原因排查信息:'+data.message; } </script> </body> </html>
2.高德地图--根据经纬度获取地址 访问链接：https://*******/AdrXY_gaode.html?x="+x+"&y="+y
<!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%; width:100%; } .btn{ width:10rem; margin-left:6.8rem; } </style> </head> <body> <div id="container"></div> <!-- <div class='info'>获取地址</div> --> <div class="input-card" style='28rem;'> <label style='color:grey'>我们已经获得您的地址，工作人员将立即赶来，注意保护现场哦~~~</label> <!-- <div class="input-item"> <div class="input-item-prepend"><span class="input-item-text">经纬度</span></div> --> <input id='lnglat' type="hidden" value='116.39,39.9'> <!-- </div> --> <div class="input-item"> <div class="input-item-prepend"><span class="input-item-text" >地址</span></div> <input id='address' type="text" disabled> </div> <!-- <input id="regeo" type="button" class="btn" value="经纬度 -> 地址" > --> </div> <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=*******&plugin=AMap.Geocoder"></script> <script type="text/javascript"> var map = new AMap.Map("container", { resizeEnable: true }); var geocoder = new AMap.Geocoder({ city: "010", //城市设为北京，默认：“全国” radius: 1000 //范围，默认：500 }); var marker = new AMap.Marker();; var x=getQueryString("x"); var y=getQueryString("y"); document.getElementById('lnglat').value=x+","+y; regeoCode(); function regeoCode() { var lnglat = document.getElementById('lnglat').value.split(','); map.add(marker); marker.setPosition(lnglat); geocoder.getAddress(lnglat, function(status, result) { if (status === 'complete'&&result.regeocode) { var address = result.regeocode.formattedAddress; document.getElementById('address').value = address; }else{ log.error('根据经纬度查询地址失败') } }); } map.on('click',function(e){ document.getElementById('lnglat').value = e.lnglat; regeoCode(); }) //document.getElementById("regeo").onclick = regeoCode; document.getElementById('lnglat').onkeydown = function(e) { if (e.keyCode === 13) { regeoCode(); return false; } return true; }; function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return decodeURIComponent(r[2]); return null; } </script> </body> </html>
3.点击链接获取定位及具体地址
<!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> --> <p >定位精度存在微小距离的误差，为保证工作人员及时准确的赶到，请在此地域稍候~~~</p> </div> <input id='lnglat' type="hidden" value='116.39,39.9'> <!-- <div class="input-item" style="height:5%;"> <div class="input-item-prepend"><span class="input-item-text" >地址</span></div> <input id='address' type="text" disabled> </div> --> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&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,//是否使用高精度定位，默认:true timeout: 10000, //超过10秒后停止定位，默认：5s buttonPosition:'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 ? '是' : '否')); //逆地理编码（经纬度-地址） START y=data.position.lat; x=data.position.lng; document.getElementById('lnglat').value=x+","+y; regeoCode(str); //逆地理编码（经纬度-地址）END } //解析定位错误信息 function onError(data) { document.getElementById('status').innerHTML='定位失败' document.getElementById('result').innerHTML = '失败原因排查信息:'+data.message; } //经纬度转地址 function regeoCode(str) { var geocoder = new AMap.Geocoder({ city: "010", //城市设为北京，默认：“全国” radius: 1000 //范围，默认：500 }); var marker = new AMap.Marker();; var lnglat = document.getElementById('lnglat').value.split(','); map.add(marker); marker.setPosition(lnglat); geocoder.getAddress(lnglat, function(status, result) { if (status === 'complete'&&result.regeocode) { var address = result.regeocode.formattedAddress; str.push('地址：' + address ); str.push('备注：定位结果以经纬度为准，地址因精度原因仅供参考' ); document.getElementById('result').innerHTML = str.join('<br>'); }else{ log.error('根据经纬度查询地址失败') } }); } </script> </body> </html>