H5百页面利用度地图API和高德地图API获得当前位置
Posted chwl
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5百页面利用度地图API和高德地图API获得当前位置相关的知识,希望对你有一定的参考价值。
高德地图
html页面
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/> 6 <title></title> 7 <script language="javascript" src="http://webapi.amap.com/maps?v=1.3&key=e8496e8ac4b0f01100b98da5bde96597"></script> 8 <script src="mAmaplbs.js"></script> 9 </head> 10 <body> 11 12 <a id="distance" onclick="getDistance()">获取距离</a> 13 <script> 14 //获取当前位置(方法名) 15 mMap.getSessionLocation(locationFunc) 16 function locationFunc(){ 17 var data = JSON.parse(sessionStorage.getItem("location")); 18 console.log(data); 19 alert("lng:"+data.position.lng) 20 alert("lat:"+data.position.lat) 21 } 22 23 // 获取两点的距离 (m) 24 function getDistance(){ 25 var obj1={lng:116.39,lat: 39.98}; 26 var obj2={lng:116.39,lat: 38.98}; 27 alert(mMap.distance(obj1,obj2)); 28 mMap.serverDistance(obj1,obj2); 29 } 30 </script> 31 </body> 32 </html>
mAmaplbs.js
//用户位置定位 使用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; }();
小结:以上代码放到本地的话可以获取到当前位置的经纬度以及具体位置,而当放到项目中的时候,只能获取经纬度,获取具体位置失败,报错说是key 或者network失败
解决方案: key是企业给的,感觉不会是这个问题,然而现在还是无解,不过幸好给出了当前位置的经纬度,通过交互给后台小哥哥传递经纬度,后台小哥通过对经纬度的判断 来确定具体位置然后返回给寄几
mMap.getSessionLocation(locationFunc) function locationFunc(){ var data = JSON.parse(sessionStorage.getItem("location")); console.log(data); var lng = data.position.lng; var lat = data.position.lat; $.ajax({ url:\'\', type: \'post\', dataType: \'json\', data:{ lng:lng, lat:lat } , success:function (res) { console.log(res); } }) }
复制高德地图API实例中心的代码到自己的编辑器在浏览器里查看时,位置并没有出来,无奈???
至于为什么不用百度地图API ???
定位不是有一点点的不准啊~~~~,不过还是放上代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=MU3NreHexTG9wvfCv0zjddLeEIbzLPCX"></script> <title>百度地图的定位</title> </head> <body> <div id="allmap" style="width: 100%;height: 500px;"></div> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(108.95,34.27); map.centerAndZoom(point,12); var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){console.log(r.point) if(this.getStatus() == BMAP_STATUS_SUCCESS){ var mk = new BMap.Marker(r.point); map.addOverlay(mk);//标出所在地 map.panTo(r.point);//地图中心移动 //alert(\'您的位置:\'+r.point.lng+\',\'+r.point.lat); var point = new BMap.Point(r.point.lng,r.point.lat);//用所定位的经纬度查找所在地省市街道等信息 var gc = new BMap.Geocoder(); gc.getLocation(point, function(rs){ var addComp = rs.addressComponents; console.log(rs.address);//地址信息 alert(rs.address);//弹出所在地址 }); }else { alert(\'failed\'+this.getStatus()); } },{enableHighAccuracy: true}) </script> </body> </html>
上面代码里的key值要到官方API申请哦~
写的好乱~~~正在努力改进!!!
以上是关于H5百页面利用度地图API和高德地图API获得当前位置的主要内容,如果未能解决你的问题,请参考以下文章