大家好:
今天试用了一下另外一个方法来获取当前位置,原理跟地图API的浏览器定位相似,相对来说 地图API浏览器中的方法更为简单,今天研究了下别人写的方法,供大家一块学习下!
一个很重要的注意事项:浏览器的标识是存在差异的!只能用手机来展示!不明所以!手机的显示是正确的,电脑却不行……(还有一个更严重的问题:我的手机居然只能显示标注,连地图都不显示!别人的手机都可以……真的不明所以啊!)
这个是GPS谷歌定位转成百度的经纬度再显示的方法:
<span style="font-size:18px;"><strong><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=7216b16c8441679ef2948d2b9a5731cc&services=false"></script> <title>获取当前所在的位置</title> </head> <body> <div id="map" style="width:100%; height:100%"> </div> </body> <script type="text/javascript"> (function() { // 闭包 function load_script(xyUrl, callback) { var head = document.getElementsByTagName('head')[0]; // 这里是获取一个数组但Head只有一个所以用[0]表示。 var script = document.createElement('script'); script.type = 'text/javascript'; script.src = xyUrl; // 借鉴了jQuery的script跨域方法 script.onload = script.onreadystatechange = function() { if ((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) { callback && callback(); script.onload = script.onreadystatechange = null; if (head && script.parentNode) { head.removeChild(script); } } }; head.insertBefore(script, head.firstChild); } function translate(point, type, callback) { var callbackName = 'cbk_' + Math.round(Math.random() * 10000); // 随机函数名 var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type + "&to=4&x=" + point.lng + "&y=" + point.lat + "&callback=BMap.Convertor." + callbackName; // 动态创建script标签 load_script(xyUrl); BMap.Convertor[callbackName] = function(xyResult) { delete BMap.Convertor[callbackName]; // 调用完需要删除改函数 var point = new BMap.Point(xyResult.x, xyResult.y); callback && callback(point); } } window.BMap = window.BMap || {}; BMap.Convertor = {}; BMap.Convertor.translate = translate; })(); <span style="color:#ff6600;">//获取当前的地理位置 if (window.navigator.geolocation) { //Geolocation可以准确感知浏览器用户当前地理位置 此方法的3个方法:1. getCurrentPosition 获取当前地理位置2. watchPosition 监视位置信息3. clearWatch 停止获取位置信息 var options = { //options:可选参数 enableHighAccuracy: true, //boolean 是否要求高精度的地理信息 timeout:6000, //获取信息的超时限制 maximumAge:36000 //对地理信息进行缓存的时间 }; window.navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options);//handleSuccess:当浏览器请求成功后的回调函数。handleError:请求失败的回调函数(可选)。options:可选参数 } else { alert("浏览器不支持html5来获取地理位置信息"); } //当浏览器请求成功后的回调函数 function handleSuccess(position){//在获取地理位置信息成功时执行的回调函数中,带有一个position参数,它是一个Geoposition对象 // 获取到当前位置经纬度 本例中是chrome浏览器取到的是google地图中的经纬度 var lng = position.coords.longitude;//当前地理位置的经度 var lat = position.coords.latitude; //当前地理位置的纬度。 var map = new BMap.Map("map"); // 调用百度地图api显示 var ggPoint = new BMap.Point(lng, lat);//(经度,纬度) // 将google地图中的经纬度转化为百度地图的经纬度 BMap.Convertor.translate(ggPoint, 0, function(point){ //真实经纬度转成百度坐标 0:代表GPS,2:google坐标 var marker = new BMap.Marker(point); map.addOverlay(marker); map.centerAndZoom(point, 15); }); } function handleError(error){//在获取地理位置信息失败时执行的回调函数中,带有一个error参数,它是一个PositionError对象。 /* alert("获取失败!"); switch(error.code){ case error.TIMEOUT: alert("连接超时,请重试"); break; case error.PERMISSION_DENIED: alert("您拒绝了使用位置共享服务,查询已取消"); break; case error.POSITION_UNAVAILABLE: alert("非常抱歉,我们暂时无法为您所在的星球提供位置服务"); break; } */ }</span> </script> </html> </strong></span>
这个方法出现的一个问题是:不知道为什么 ,请求有失败的情况……这个有点纠结啊!
相对的浏览器定位是比较简单的!
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>浏览器定位</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.331398,39.897445); map.centerAndZoom(point,12); var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ 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); } else { alert('failed'+this.getStatus()); } },{enableHighAccuracy: true}) //关于状态码 //BMAP_STATUS_SUCCESS 检索成功。对应数值“0”。 //BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。 //BMAP_STATUS_UNKNOWN_LOCATION 位置结果未知。对应数值“2”。 //BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。 //BMAP_STATUS_INVALID_KEY 非法密钥。对应数值“4”。 //BMAP_STATUS_INVALID_REQUEST 非法请求。对应数值“5”。 //BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增) //BMAP_STATUS_SERVICE_UNAVAILABLE 服务不可用。对应数值“7”。(自 1.1 新增) //BMAP_STATUS_TIMEOUT 超时。对应数值“8”。(自 1.1 新增) </script>这个方法是百度给出来的方法!其中也有我不明白的东西,比如
var point = new BMap.Point(116.331398,39.897445);我还真没整明白为什么给出了两个固定的值,同事说是一个中心点,不甚明白,也只能这样理解了!
原文地址:http://blog.csdn.net/yingmengxuepingbao/article/details/41982283