高德地图API获取当前位置对应的周边信息
一、前言
当前公司开发计划做一个打卡功能,获取用户信息地理信息后,提供列表给客户选择打卡地点(200米范围内)。自己今天对三家地图开放者平台文档进行了查看比较(腾讯、百度、高德),目前实现的方法采用的是高德地图的open API。实现的逻辑方法是通过H5页面接入高德地图(key需要自己到官网申请),获取当前经纬度,将当前的经纬度传到高德提供的方法后,获取下拉列表。实现如下:
二、实现步骤
1.创建生成key
添加key地址
当注册完并进入上面提供的地址后,看见如下页面:
选择“创建新应用”,
填入相关名称和类型后,列表中将出现一条信息,把key复制下来。
2.地图引入
创建一个工程,创建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://cache.amap.com/lbs/static/main1119.css" /><script src="https://cache.amap.com/lbs/static/es5.min.js"></script><script src="https://webapi.amap.com/maps?v=1.4.8&key=替换自己生成的key"></script><script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script><style media="screen">#container {width: 100%;height: 600px;}</style>
</head><body>
<!--<div id="container"></div>--><script>var map = new AMap.Map('container', {resizeEnable: true,zoom: 11,center: [116.397428, 39.90923]});
</script>
</body></html>
将申请的key替换到上方的script的链接中。至此,地图引入完成。
3.获取当前定位信息
//初始化定位map.plugin('AMap.Geolocation', function () {geolocation = new AMap.Geolocation({enableHighAccuracy: true,//是否使用高精度定位,默认:truetimeout: 10000, //超过10秒后停止定位,默认:无穷大maximumAge: 0, //定位结果缓存0毫秒,默认:0convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:trueshowButton: true, //显示定位按钮,默认:truebuttonPosition: 'LB', //定位按钮停靠位置,默认:'LB',左下角buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)showMarker: true, //定位成功后在定位到的位置显示点标记,默认:trueshowCircle: true, //定位成功后用圆圈表示定位精度范围,默认:truepanToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:truezoomToAccuracy:true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false});map.addControl(geolocation);geolocation.getCurrentPosition();AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息});function onComplete(obj){var res = '经纬度:' + obj.position +'\n精度范围:' + obj.accuracy +'米\n定位结果的来源:' + obj.location_type +'\n状态信息:' + obj.info +'\n地址:' + obj.formattedAddress +'\n地址信息:' + JSON.stringify(obj.addressComponent, null, 4);console.log("当前位置信息"+res);}function onError(obj) {alert(obj.info + ',,,,' + obj.message);console.log(obj);}
添加上方代码,初始化后,将定位当前地理位置。
4.获取周边信息
基于上边的配置,已经可以获取如下的相关信息
此时已经有了当前的经纬度,因此,将经纬度信息的取值拿出来,进行下一步周边信息的获取:
// 高德地图查询周边function aMapSearchNearBy(centerPoint, city) {AMap.service(["AMap.PlaceSearch"], function() {var placeSearch = new AMap.PlaceSearch({pageSize: 20, // 每页10条pageIndex: 1, // 获取第一页city: city // 指定城市名(如果你获取不到城市名称,这个参数也可以不传,注释掉)});// 第一个参数是关键字,这里传入的空表示不需要根据关键字过滤// 第二个参数是经纬度,数组类型// 第三个参数是半径,周边的范围// 第四个参数为回调函数placeSearch.searchNearBy('', centerPoint, 200, function(status, result) {if(result.info === 'OK') {console.log(result);var locationList = result.poiList.pois; // 周边地标建筑列表// 生成地址列表html createLocationHtml(locationList);} else {console.log('获取位置信息失败!');}});});}aMapSearchNearBy([118.76431,31.9844], '');
返回数据如下:
官方提供的说明文档如下:
至此,获取当前定位信息及周边环境信息完成。代码简单,探索的过程还是有些坑坑洼洼,给各位提供了帮助的话多多支持下哈。
高德地图API获取当前位置对应的周边信息相关推荐
- java获取经纬度_java调用高德地图api获取某个位置的经纬度
java调用高德地图api获取经纬度的方法,废话少说,直接上代码: import com.fasterxml.jackson.databind.JsonNode; import com.ning.ht ...
- pc端使用高德地图api获取当前位置的经纬度
<!DOCTYPE html> <html><head><meta charset="utf-8"><meta name=&q ...
- 调用腾讯地图API、高德地图API 获取当前地理位置、经纬度
调用腾讯地图API.高德地图API 获取当前地理位置.经纬度 web开发中,很多情况下都会需要获取当前位置的经纬度,在网上找了几个不同的地图,最终找到兼容比较好的腾讯地图API 1.调用腾讯地图API ...
- 百度地图利用位置提供服务器,利用百度地图API获取当前位置信息的实例
利用百度地图API可以做很多事情,个人感觉最核心也是最基础的就是定位功能了.这里分享一个制作的JS可以实现登录网页后定位: var map; var gpsPoint; var baiduPoint; ...
- html调用腾讯地图定位当前位置,vue web项目中调用腾讯地图API获取当前位置的经纬度...
vue web项目中调用腾讯地图API获取当前位置的经纬度 vue web项目中调用腾讯地图API获取当前位置的经纬度 在main.js 中添加一下代码 import axios from 'axio ...
- HTML5页面调用百度地图API,获取当前位置并导航到目的地
微信也可用, <!DOCTYPE html> <html lang="zh-cmn-Hans"><meta charset="UTF-8&q ...
- 提取某一个镇的行政边界_高德地图api获取行政边界矢量方法
高德地图api获取行政边界矢量方法 发布时间:2018-09-07 17:51, 浏览次数:2170 , 标签: api 1.获取高德地图web服务key 2.行政区域查询API服务地址: https ...
- 利用高德地图API获取任意两座城市之间的距离!异地也有惊喜!
工作中有时会遇到这样一种场景:年末需要统计所有员工该年的航旅出差情况,然后根据他们的飞行距离补贴一定的交通费.例如如下所示情况: 然而,如果我们使用地图APP等工具逐一进行手工查询,在一家规模稍大的公 ...
- 关于在vue2.X中使用高德地图api获取用户定位
最近开发的MOA考试端需要获取到当前考试用户的定位,公司没有自己的定位组件,所以需要接入高德地图api 废话不多说,直接上操作步骤. 1.首先上高德地图API的官网,高德地图API官网, 跟着以上的步 ...
最新文章
- 【Science】CMU机器学习系主任:八个关键标准判别深度学习任务成功与否
- Grub 修复(文件损坏)有备份
- linux脚本获取当前用户,bash shell 获取当前正在执行脚本的绝对路径
- Fiddler代理手机抓包
- IDEA使用过程中相应的配置和设置(如编码设置、窗口调整以及config.xml文件模板创建、工程打开方式、约束文件)
- 项目简单实用方式_组合替代继承_状态决定行为
- android+5.0+小米手环,小米手环5和荣耀手环6哪个好-参数对比
- 【python教程入门学习】python入门:来来来,每天10点定时签到拿京豆啦
- 东南大学成贤c语言试卷,成贤高数(下)期中试卷参考答案
- c语言 面试前必备基础知识
- 论文解读:iDRNA-ITF:基于诱导和转移框架识别蛋白质中的DNA和RNA结合残基
- 微软SQL Server BI认证专家QQ群36882826
- 点击唤起电话功能和企业微信聊天窗口事件(H5)
- 转:管理者必备技能之全局观:找出复杂环境中的秩序
- Android 自定义键盘 随机键盘
- 20201114-三轴云台storm32 BGC HAKRC调试+
- 概率论与数理统计---------大数定律
- DLink624+A拨号失败的问题
- protobuf引入不同包下的proto文件
- centos7下zeppelin安装配置
热门文章
- 高中以前的手绘作品,素描和水粉
- Python Matplotlib设置x轴与y轴相交于心仪的坐标点
- 可用于保健食品的中药名单,卫生部关于进一步规范保健食品原料管理的通知...
- 如何将自己喜欢的图片设置为文件图标
- 淘宝电商产品jQuery图片放大镜代码
- python时间序列分析航空旅人_大佬整理的Python数据可视化时间序列案例,建议收藏(附代码)...
- javascript下载图片而不是浏览器默认打开图片
- html5 手机站点,HTML5移动端手机网站基本模板 HTML5基本结构
- 程序员的焦虑!程序媛的捉急!测试的前景和钱景知多少?
- 2019.11.28