高德地图API(使用浏览器ip实现精确定位)
高德地图API(使用浏览器ip实现精确定位)
一、关于JSAPI
地图 JSAPI 2.0 是高德开放平台免费提供的第四代 Web 地图渲染引擎， 以 WebGL 为主要绘图手段，本着“更轻、更快、更易用”的服务原则，广泛采用了各种前沿技术，交互体验、视觉体验大幅提升，同时提供了众多新增能力和特性。
二、注册高德地图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="https://a.amap.com/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>
<!-- 配置安全密钥,自2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用 -->
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode:您的安全密钥,
}
</script>
<script type="text/javascript" src="https://webapi.amap.com/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,//是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：5s
position: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>
更多示例参考