高德地图js api教程_高德地图sdk使用教程

全栈程序员站长

发布于 2022-11-07 16:43:56

4.4K0

发布于 2022-11-07 16:43:56

前言：

由于项目需求需要在项目中实现手机端（基于网页）考勤打卡功能，最初考虑使用H5自身定位功能，但尝试过后，效果很不稳定。然后尝试使用百度地图JsAPI，百度家的稳定倒是很稳定，没想到的是定位位置和实际位置居然相差几十公里，一开始是以为自己配置有问题，浪费了我大半天时间去找原因，最后发现他本身提供的API就是偏差很大距离的，他自己家的倒是定位很准，对外开放的API简直惨不忍睹。

百度API浏览器定位

高德API浏览器定位

然后换用高德去测试，高德开放的API精确度和百度地图是一样的，小伙伴可以亲自去体验下，难怪百度如今沦落到这样。。。

所以就决定使用高德API来进行定位了；

主要思路：利用高德API获取当前位置经纬度、设置考勤点经纬度、计算两点距离判断是否在考勤范围内。

高德JS API提供的浏览器定位接口，融合了HTML5 Geolocation定位接口、精确IP定位服务，以及安卓定位sdk定位。所以在定位上大大提高了精准度以及成功率。

效果如下：

正文：

首先注册账号并申请Key

1. 首先，注册开发者账号，成为高德开放平台开发者

2. 登陆之后，在进入「应用管理」页面「创建新应用」

3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

准备页面

1. 在页面添加 JS API 的入口脚本标签，并将其中「您申请的key值」替换为您刚刚申请的 key；

HTML

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

2. 添加div标签作为地图容器，同时为该div指定id属性；

HTML

<div id="container"></div>

3. 为地图容器指定高度、宽度；

CSS

#container {width:300px; height: 180px; }

4. 进行移动端开发时，请在head内添加viewport设置，以达到最佳的绘制性能；

HTML

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

5. 在完成如上准备工作之后便可以开始进行开发工作了。

显示定位地图以及获取当前经纬度地址

<!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 type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&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
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>');
}
//解析定位错误信息
function onError(data) {
document.getElementById('status').innerHTML='定位失败'
document.getElementById('result').innerHTML = '失败原因排查信息:'+data.message;
}
</script>
</body>
</html>

计算当前位置与考勤点距离

var signzone = [121.52625, 31.66925];//设置的签到点
console.log(signzone);
//计算当前位置与考勤点距离
var distance = AMap.GeometryUtil.distance(getposition,signzone).toFixed(2);
//document.getElementById('distance').innerHTML = distancestr;
console.log(distance);
if (distance <= 1000) {
//在范围内
//数据操作
} else {
//不在范围内
//数据操作
}

绘制签到点范围

//绘制签到范围
var circle = new AMap.Circle({
center: signzone,
radius: 100, //签到范围半径
borderWeight: 1,
strokeOpacity: 1,
strokeOpacity: 0.2,
fillOpacity: 0.4,
})
circle.setMap(map)
// 缩放地图到合适的视野级别
map.setFitView([ circle ])
var circleEditor = new AMap.CircleEditor(map, circle)