利用高德地图javascriptAPI实现模仿滴滴打车定位

利用高德地图javascriptAPI实现模仿滴滴打车定位

使用API

AMap.Map：地图对象类，封装了地图的属性设置、图层变更、事件交互等接口的类。

AMap.Geocoder：地理编码与逆地理编码类，用于地址描述与坐标之间的转换。
用户可以通过自定义回调函数取回并显示查询结果。若服务请求失败，系统将返回错误信息

AMap.Geolocation：定位服务插件。融合了浏览器定位、高精度IP定位、安卓定位sdk辅助定位等多种手段，
提供了获取当前准确位置、获取当前城市信息、持续定位(浏览器定位)等功能。用户可以通过两种当时获得定位
的成败和结果，一种是在getCurrentPosition的时候传入回调函数来处理定位结果，一种是通过事件监听来取得定位结果。

AMap.Marker 覆盖物: 构造一个点标记对象，通过MarkerOptions设置点标记对象的属性

代码实现

<!doctype html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Getters Started</title><!-- - <script src="https://unpkg.com/lodash@4.16.6"></script> --><style>#mainMap {width: 390px;height: 450px}#resultMapInfo {position: absolute;left: 0;top: 30px;z-index: 999;}</style>
</head><body><!-- - <script src="./src/index.js"></script> --><div id="resultMapInfo">请使用4G网络获取定位精确度高</div><div id="mainMap"></div><script language="javascript" src="https://webapi.amap.com/maps?v=1.3&key=243687cce3d5ac3f7a3b4bb90a97fda1"></script><!-- <script src="/dist/bundle.js"></script> --><script>// 实例化地图， 命名定位插件实例、标记实例、地理编码实例、输出变量var map = new AMap.Map('mainMap', {resizeEnable: true,zoom: 16}),geolocation = null,Marker = null,geocoder = null,result = document.getElementById('resultMapInfo');// 添加地图全局移动事件// 移动中AMap.event.addListener(map, 'dragging', function() {Marker.setPosition(map.getCenter())});// 停止移动AMap.event.addListener(map, 'dragend', function() {console.log(map.getCenter())// 利用地图地理编码查询地址geocoder.getAddress(map.getCenter(), function(status, data) {if (status === 'complete' && data.info === 'OK') {//获得了有效的地址信息://即，var str = '<p>获取成功</p>';str += '<p>当前位置：' + data.regeocode.formattedAddress + '</p>';result.innerHTML = str;console.log(data.regeocode.formattedAddress)console.log(map.getCenter().getLat())console.log(map.getCenter().getLng())} else {//获取地址失败var str = '<p>定位失败</p>';str += '<p>错误信息：'switch (data.info) {case 'INVALID_UESR_KEY':str += '用户key非法或过期';break;case 'SERVICE_UNAVAILABLE':str += '请求服务不可用';break;case 'INSUFFICIENT_PRIVILEGES':str += '无权限访问此服务';break;case 'INVALID_PARAMS':str += '请求参数非法';break;default:str += '无网络或其他未知错误';break;}str += '，请重新获取当前位置。</p>';result.innerHTML = str;}});Marker.setPosition(map.getCenter())Marker.setAnimation('AMAP_ANIMATION_DROP')});// 加载地理位置编码插件AMap.service('AMap.Geocoder', function() { //回调函数//实例化Geocodergeocoder = new AMap.Geocoder({city: "010" //城市，默认：“全国”});//TODO: 使用geocoder 对象完成相关功能});// 加载定位插件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: false, //定位成功后在定位到的位置显示点标记，默认：trueshowCircle: false, //定位成功后用圆圈表示定位精度范围，默认：truepanToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：truezoomToAccuracy: true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false});// 把定位插件加入地图实例map.addControl(geolocation);// 添加地图全局定位事件AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息// 调用定位geolocation.getCurrentPosition();});/**解析定位结果*/function onComplete(data) {Marker = null;var str = '<p>定位成功</p>';//str += '<p>经度：' + data.position.getLng() + '</p>';//str += '<p>纬度：' + data.position.getLat() + '</p>';str += '<p>精度：' + data.accuracy + ' 米</p>';//str += '<p>是否经过偏移：' + (data.isConverted ? '是' : '否') + '</p>';str += '<p>当前位置：' + data.formattedAddress + '</p>';//str += '<p>' + data.addressComponent.province + data.addressComponent.city + data.addressComponent.district + data.addressComponent.township + data.addressComponent.street + data.addressComponent.streetNumber + '</p>';// 初始化标记if (Marker) {// 标记存在则把地图中心点设置给标记Marker.setPosition(map.getCenter())Marker.setAnimation('AMAP_ANIMATION_DROP')} else {// 标记不存在则实例化一个新的标记，且把当前地图中心点设置给标记Marker = new AMap.Marker({position: map.getCenter(),animation: 'AMAP_ANIMATION_DROP'});// 把标记加入地图实例Marker.setMap(map);}result.innerHTML = str;};/**解析定位错误信息*/function onError(data) {var str = '<p>定位失败</p>';str += '<p>错误信息：'switch (data.info) {case 'PERMISSION_DENIED':str += '浏览器阻止了定位操作';break;case 'POSITION_UNAVAILBLE':str += '无法获得当前位置';break;case 'TIMEOUT':str += '定位超时';break;default:str += '无网络或其他未知错误';break;}str += '，请重新获取当前位置。</p>';// 初始化标记if (Marker) {// 标记存在则把地图中心点设置给标记Marker.setPosition(map.getCenter())Marker.setAnimation('AMAP_ANIMATION_DROP')} else {// 标记不存在则实例化一个新的标记，且把当前地图中心点设置给标记Marker = new AMap.Marker({position: map.getCenter(),animation: 'AMAP_ANIMATION_DROP'});// 把标记加入地图实例Marker.setMap(map);}result.innerHTML = str;};</script>
</body></html>

利用高德地图javascriptAPI实现模仿滴滴打车定位相关推荐

【应用】Python利用高德地图经纬度数据绘制定位
[应用]Python利用高德地图经纬度数据绘制定位一. 背景二. 获取API 1. 注册高德开放平台个人开发者 2. 获取key 三. 具体步骤 1. 库的导入 2. 根据地址获取经纬度 3. 绘 ...
基于高德地图JsAPI进行浏览器精确定位，实现手机端考勤打卡功能
前言: 由于项目需求需要在项目中实现手机端(基于网页)考勤打卡功能,最初考虑使用H5自身定位功能,但尝试过后,效果很不稳定.然后尝试使用百度地图JsAPI,百度家的稳定倒是很稳定,没想到的是定位位置和 ...
python做地图导航_「Python」利用高德地图做你想做之事
玩grasshopper基本上都知道OpenStreetMap 这个地图网站,毕竟有一个好用的地图插件,可以在Rhino中绘制出所需,但是一个不好的地方就在于国内的数据量太少,无法满足我们的需求. 此 ...
python调用高德地图api 可视化_Python：利用高德地图API实现找房
记:本项目是在实验楼上看到的,但是上面的代码由于没有及时维护,爬虫文件的代码不再能完整的把所有房源信息爬取下来,我根据最新的58同城官网进行了研究,现在的官网的房源信息已经不是分页的了,而是拉到最后自 ...
python做地图导航_【Python】利用高德地图做你想做之事
原标题:[Python]利用高德地图做你想做之事 [版权声明] 作者:CPF 如需转载请联系CPF 如有侵权请联系大水牛平台玩grasshopper基本上都知道OpenStreetMap 这个地图网 ...
「Python」利用高德地图做你想做之事
玩grasshopper基本上都知道OpenStreetMap 这个地图网站,毕竟有一个好用的地图插件,可以在Rhino中绘制出所需,但是一个不好的地方就在于国内的数据量太少,无法满足我们的需求. 此 ...
利用高德地图API获取任意两座城市之间的距离！异地也有惊喜！
工作中有时会遇到这样一种场景:年末需要统计所有员工该年的航旅出差情况,然后根据他们的飞行距离补贴一定的交通费.例如如下所示情况: 然而,如果我们使用地图APP等工具逐一进行手工查询,在一家规模稍大的公 ...
如何利用高德地图URI加载区域边界
高德URI 以下是高德地图API官网中URI API以及行政区查询的相关页面展示.在行政区域查询中对相应的参数也有详细的描述. 利用URI API进行调用的实例:在返回的数据中districts中包含 ...
python高德地图api调用实例_Python 利用高德地图api实现经纬度与地址的批量转换...
我们都知道,可以使用高德地图api实现经纬度与地址的转换.那么,当我们有很多个地址与经纬度,需要批量转换的时候,应该怎么办呢? 在这里,选用高德Web服务的API,其中的地址/逆地址编码,可以实现经纬 ...

利用高德地图javascriptAPI实现模仿滴滴打车定位

利用高德地图javascriptAPI实现模仿滴滴打车定位

使用API

代码实现

利用高德地图javascriptAPI实现模仿滴滴打车定位相关推荐

最新文章

热门文章