js+高德地图api实现地理定位

需求：使用高德地图进行签到
思路：使用高德地图获取当前定位，比对与目标定位点距离，根据距离值判断是否定位成功

创建api_key
高德地图官方地址
点击报到按钮，显示地图信息列表，若在报到范围内，可以点击报到按钮，否则按钮置灰。

思路：先创建地理围栏，再获取当前位置与地理围栏地址对比，若在允许的圆心范围内，则定位成功，否则失败
具体代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" type="text/css"><script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=bff97a5a5ba86b6d7d9a2b6f0ec49ed3"></script><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script><script crossorigin="anonymous"integrity="sha512-XdUZ5nrNkVySQBnnM5vzDqHai823Spoq1W3pJoQwomQja+o4Nw0Ew1ppxo5bhF2vMug6sfibhKWcNJsG8Vj9tg=="src="https://lib.baomitu.com/vue/2.6.14/vue.min.js"></script><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=2.0&key=bff97a5a5ba86b6d7d9a2b6f0ec49ed3&plugin=AMap.Geocoder"></script><title>Document</title><style>#container {margin: 10px auto;width: 90vw;height: 200px;}.sign-in-map {margin: auto;width: 90vw;height: 500px;}</style>
</head><body><div class="sign-in-map"><div id="container"></div><div class="sign-info"><h4 id="status"></h4><hr><p id="result"></p><div id="address"></div><hr></div></div><script>var vm = new Vue({el: '#checkWrap',data: {loadData: null,hadAppData: true,checkList: {unCheckList: null,hasCheckList: null,},userCardList: null,cardLayShow: false,checkedIndex: '',defaultCard: null,localCardId: '',recordIndex: 0,//记录当前tabusername: "",// map datamarker: null,map: null,polygon: null,nowPosition: false,position: "",geocoder: null,},mounted: function () {console.log('3.定位');this.initMap();},created: function () {console.log('1.创建地理围栏');this.setMap()console.log('2.获取地理围栏地址');this.getPosition();},methods: {setMap() {// 创建地理围栏axios.post("https://restapi.amap.com/v4/geofence/meta?key=a164c07704fc424e8ce33050bedcf1ef", {"name": "西湖","center": "120.121281,30.222718","radius": "1000","enable": "true","valid_time": "2029-12-31","repeat": "Mon,Tues,Wed,Thur,Fri,Sat,Sun","time": "00:00,11:59;13:00,20:59","desc": "西湖","alert_condition": "enter;leave"}).then((res) => {console.log("创建地理围栏");console.log(res)}).catch((error) => {console.log(error)})},initMap() {let that = this;this.map = new AMap.Map('container', {resizeEnable: true});AMap.plugin('AMap.Geolocation', function () {var geolocation = new AMap.Geolocation({enableHighAccuracy: true,//是否使用高精度定位，默认:truetimeout: 10000,          //超过10秒后停止定位，默认：5sposition: 'RB',    //定位按钮的停靠位置buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点});that.map.addControl(geolocation);geolocation.getCurrentPosition(function (status, result) {console.log("当前位置定位结果");console.log(result);let lng = result.position.lng;let lat = result.position.lat;let time = parseInt((new Date().getTime()) / 1000);that.postion = lng + ',' + lat + ',' + time;console.log("反显地址1");that.getPositionByLonLats(lng, lat);console.log("反显地址2");that.positionCompare(that.postion, status, result);});});},getPosition() {axios.get("https://restapi.amap.com/v4/geofence/meta?key=a164c07704fc424e8ce33050bedcf1ef&gid=ef38d1dc-38ca-4612-8ff0-795ffdbaaf40").then((res) => {console.log("请求围栏地址区域");console.log(res)}).catch((err) => {console.log(err)})},positionCompare(position, status, result) {let that = this;axios.get("https://restapi.amap.com/v4/geofence/status?key=a164c07704fc424e8ce33050bedcf1ef&diu=356334102726551&locations=" + position).then((res) => {console.log("比对当前位置与围栏位置");console.log(res);if (status == 'complete') {if (res.data.data.nearest_fence_distance) {console.log("距离太远，报到失败")that.onError(result)} else {console.log("报到成功");that.onComplete(result)}} else {console.log("定位失败")that.onError(result)}}).catch((err) => {console.log(err);})},//解析定位结果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>');},//解析定位错误信息onError(data) {document.getElementById('status').innerHTML = '签到失败'// document.getElementById('result').innerHTML = '失败原因排查信息:' + data.message + '</br>返回信息：' + data.originMessage;// console.log(data)},// 反显地址getPositionByLonLats(lng, lat) {console.log("经度：" + lng + "纬度" + lat);var lnglat = [lng, lat];// 地图上所标点的坐标this.geocoder = new AMap.Geocoder();this.geocoder.getAddress(lnglat, function (status, result) {console.log(result);if (status === 'complete' && result.regeocode) {var address = result.regeocode.formattedAddress;console.log(address);// document.getElementById('address').value = address;} else {log.error('根据经纬度查询地址失败')}});}}})</script><script></script>
</body></html>

js+高德地图api实现地理定位相关推荐

HTML5+百度地图API实现地理定位
背景如果知道用户在哪里,往往会提高很多Web应用的体验,比如为用户指明方向,对它们要去的地方给出建议,让用户知道它们所在的区域内有哪些人可能会对某个活动感兴趣等等.现在,利用HTML5(以及基于Ja ...
Android使用高德地图api实现基础定位
Android使用高德地图api实现基础定位(一) 关于会获取SHA1的可自行跳过这一步第二步引用高德sdk 第三步修改MainActivity.java 关于这篇主要讲如何使用高德sdk(不是 ...
android开发之高德地图API篇：1、高德地图API之实时定位+轨迹可视化
TIME:2020年7月6日高德地图API之实时定位+轨迹可视化前言: step1.工程的配置 step2.显示地图 step2.实现静态定位: step3.实时定位 step4.实现轨迹可视化: ...
高德地图API之IP定位
高德地图API之IP定位(替换你的KEY) IP定位API:http://lbs.amap.com/api/webservice/guide/api/ipconfig package com.gdma ...
关于在vue2.X中使用高德地图api获取用户定位
最近开发的MOA考试端需要获取到当前考试用户的定位,公司没有自己的定位组件,所以需要接入高德地图api 废话不多说,直接上操作步骤. 1.首先上高德地图API的官网,高德地图API官网, 跟着以上的步 ...
通过高德地图API实现浏览器定位[以及提高定位精度、获取详细位置信息]
目录一.前言: 二.正文: 1.注册高德地图开发者.创建应用 2.借助官方的示例开发 3.对官方的开发示例进行修改 4.获取详细位置信息 5.详细代码三.结尾:小周接触编程时间不长,刚起步,有更好 ...
Vue+高德地图API的使用(定位打卡)
接上之前的项目 Vue+高德地图API的使用 Vue+高德地图API的使用(插件的使用) 1.页面布局绘制页面 <div class="Clock"><!-- ...
高德地图api之location定位
关于定位,分为GPS定位和网络定位.本文将详细描述的浏览器定位,属于网络定位.这是一种通过使用高德JS-API来实现位置定位.城市定位的方法,包含了IP定位,检索等多种网络定位方式.如果您的手机支持G ...
H5开发：调用高德地图api实现H5定位功能
关于定位,分为GPS定位和网络定位.本文将详细描述的浏览器定位,属于网络定位.这是一种通过使用高德JS-API来实现位置定位.城市定位的方法,包含了IP定位,检索等多种网络定位方式.如果您的手机支持G ...

js+高德地图api实现地理定位

js+高德地图api实现地理定位相关推荐

最新文章

热门文章