H5开发:调用高德地图api实现H5定位功能
2017-07-25 14:29
316 查看
关于定位,分为GPS定位和网络定位。本文将详细描述的浏览器定位,属于网络定位。这是一种通过使用高德JS-API来实现位置定位、城市定位的方法,包含了IP定位,检索等多种网络定位方式。如果您的手机支持GPS功能,能够自动获取GPS信息,定位将更加准确。
浏览器定位插件,封装了标准的HTML5定位,并含纠正模块,同时该定位方式仅适用于支持HTML5的浏览器上,如Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera等。代码如下:
这里将定位获取的信息存入sessionStorge中,这样只需要首次访问时,需要定位,之后都可以从sessionStorge中得到,大大提高了速度。
下面将演示调用定位和两点距离的实例。
其中”webapi.amap.com/maps?v=1.3&key=e8496e8ac4b0f01100b98da5bde96597这里面的key,需要在高德API网站获取[http://lbs.amap.com/]。
浏览器定位
浏览器定位插件,封装了标准的HTML5定位,并含纠正模块,同时该定位方式仅适用于支持HTML5的浏览器上,如Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera等。代码如下:/** * Created by ly-wangweiq on 2015/7/29. * * support mobile */ //用户位置定位 使用geolocation定位 var mMap=function(){ function rad(d){ return d*Math.PI/180.0; } this.map={}, this.geolocation={}, this.k=0, //加载地图,调用浏览器定位服务 this.initMap=function(mapContainer,completFunc){ if(typeof(AMap)=="object"){ this.map = new AMap.Map(mapContainer, { resizeEnable: true }); this.map.plugin('AMap.Geolocation', function () { this.geolocation = new AMap.Geolocation({ enableHighAccuracy: true,//是否使用高精度定位,默认:true timeout: 10000, //超过10秒后停止定位,默认:无穷大 maximumAge: 0, //定位结果缓存0毫秒,默认:0 convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true showButton: true, //显示定位按钮,默认:true buttonPosition: 'LB', //定位按钮停靠位置,默认:'LB',左下角 buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20) showMarker: true, //定位成功后在定位到的位置显示点标记,默认:true showCircle: true, //定位成功后用圆圈表示定位精度范围,默认:true panToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:true zoomToAccuracy:true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false }); this.map.addControl(this.geolocation); AMap.event.addListener(this.geolocation, 'complete', onComplete);//返回定位信息 AMap.event.addListener(this.geolocation, 'error', onError); //返回定位出错信息 }); function onComplete(data){ console.log(completFunc) console.log(data) if(completFunc){ completFunc(data); } } function onError(){ var str = '定位失败,'; str += '错误信息:' switch(data.info) { case 'PERMISSION_DENIED': str += '浏览器阻止了定位操作'; break; case 'POSITION_UNAVAILBLE': str += '无法获得当前位置'; break; case 'TIMEOUT': str += '定位超时'; break; default: str += '未知错误'; break; } alert(str) } } }, this.getCurrentPosition=function(callback){ if(typeof(this.geolocation.getCurrentPosition)!='undefined'){ this.geolocation.getCurrentPosition(); }else{ setTimeout(function(){ //将获得的经纬度信息,放入sessionStorge this.getSessionLocation(callback) },200) } }, this.distance = function(obj1,obj2){//return:m var lng=new AMap.LngLat(obj1.lng, obj1.lat); var lag=new AMap.LngLat(obj2.lng, obj2.lat); var ss=lng.distance(lag); return ss; }, this.getSessionLocation=function(callback){ if(sessionStorage.getItem('location')){ callback(); }else{ this.initMap('',function(data){ sessionStorage.setItem("location",JSON.stringify(data)) callback(); }); this.getCurrentPosition(callback); } }, /* *两点之间的距离 *(lng1.lat1)地址一的经纬度 *(lng2.lat2)地址一的经纬度 *单位米 */ this.serverDistance = function(obj1,obj2){//return:m var radLat1 = rad(obj1.lat); var radLat2 = rad(obj2.lat); var a = radLat1 - radLat2; var b = rad(obj1.lng)- rad(obj2.lng); var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) + Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2))); s = s *6378137; s = Math.round(s * 10000)/10000 ; return s; } return this; }();
这里将定位获取的信息存入sessionStorge中,这样只需要首次访问时,需要定位,之后都可以从sessionStorge中得到,大大提高了速度。
下面将演示调用定位和两点距离的实例。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/> <title></title> <script language="javascript" src="http://webapi.amap.com/maps?v=1.3&key=e8496e8ac4b0f01100b98da5bde96597"></script> <script src="mAmaplbs.js"></script> </head> <body> <a id="distance" onclick="getDistance()">获取距离</a> <script> //获取当前位置(方法名) mMap.getSessionLocation(locationFunc) function locationFunc(){ var data = JSON.parse(sessionStorage.getItem("location")); alert("lng:"+data.position.lng) alert("lat:"+data.position.lat) } // 获取两点的距离 (m) function getDistance(){ var obj1={lng:116.39,lat: 39.98}; var obj2={lng:116.39,lat: 38.98}; alert(mMap.distance(obj1,obj2)); mMap.serverDistance(obj1,obj2); } </script> </body> </html>
其中”webapi.amap.com/maps?v=1.3&key=e8496e8ac4b0f01100b98da5bde96597这里面的key,需要在高德API网站获取[http://lbs.amap.com/]。
相关文章推荐
- 移动端开发APPCAN调用高德地图API实现定位等功能
- Smobiler实现手机GPS定位和调用地图的功能(开发日志十)
- Android 百度地图开发(一)如何调用百度地图接口和在项目中显示百度地图以及实现定位
- iPhone开发笔记(19)实现类似网易新闻当应用状态变为active时手动调用下拉刷新的功能
- 浅谈百度地图的简单开发之结合方向传感器实现定位功能(三)
- iOS 开发之实现调用电话功能代码
- Android Camera开发系列(上)——Camera的基本调用与实现拍照功能以及获取拍照图片加载大图片
- iOS开发中实现后台定位功能
- iOS开发 解决WKWebView加载的h5,无法调用拨打电话功能
- 百度地图的简单开发之方向传感器实现定位功能(三)
- iOS开发:调用系统自带相机以及获取相册照片的功能实现
- iPhone开发笔记(19)实现类似网易新闻当应用状态变为active时手动调用下拉刷新的功能
- Android Camera开发系列(上)——Camera的基本调用与实现拍照功能以及获取拍照图片加载大图片
- ionic开发——调用键盘搜索功能实现方法
- Android Camera开发系列(上)——Camera的基本调用与实现拍照功能以及获取拍照图片加载大图片
- .Net语言 APP开发平台——Smobiler学习日志:如何快速实现地图定位时的地点微调功能
- iOS开发之使用系统库CoreLocation实现定位功能
- 调用百度地图实现定位功能
- iOS开发——高级技术&调用地图功能的实现
- 百度地图api以及定位api的开发实现定位功能