html5之手机js定位
Html5中提供了地理位置信息的API，通过浏览器来获取用户当前位置。基于此特性可以开发基于位置的服务应用。在获取地理位置信息前，首先浏览器都会向用户询问是否愿意共享其位置信息，待用户同意后才能使用。
Html5获取地理位置信息是通过GeolocationAPI提供，使用其getCurrentPosition方法，此方法中有三个参数，分别是成功获取到地理位置信息时所执行的回调函数，失败时所执行的回调函数和可选属性配置项。
如下Demo演示了通过Geolocation获取地理位置信息，并在百度地图上显示当前位置（通过调用百度地图API）。实验结果发现位置被定位到了大学城内环东四路入口处，与本人所在位置（华工学生宿舍）偏差还是有点大的，达到200-300米左右。
代码如下所示（其中convertor.js为百度地图提供的坐标转化文件）：
复制代码
1<!DOCTYPEhtml>
2<html>
3<head>
4<title>H5地理位置Demo</title>
5<scriptsrc="http://api.map.baidu.com/api?v=1.3"type="text/javascript">
6</script>
7<scripttype="text/javascript"src="convertor.js">
8</script>
9</head>
10<body>
11<divid="map"style="width:600px;height:400px">
12</div>
13</body>
14<scripttype="text/javascript">
15if(window.navigator.geolocation){
16varoptions={
17enableHighAccuracy:true,
18};
19window.navigator.geolocation.getCurrentPosition(handleSuccess,handleError,options);
20}else{
21alert("浏览器不支持html5来获取地理位置信息");
22}
23
24functionhandleSuccess(position){
25//获取到当前位置经纬度本例中是chrome浏览器取到的是google地图中的经纬度
26varlng=position.coords.longitude;
27varlat=position.coords.latitude;
28//调用百度地图api显示
29varmap=newBMap.Map("map");
30varggPoint=newBMap.Point(lng,lat);
31//将google地图中的经纬度转化为百度地图的经纬度
32BMap.Convertor.translate(ggPoint,2,function(point){
33varmarker=newBMap.Marker(point);
34map.addOverlay(marker);
35map.centerAndZoom(point,15);
36});
37}
38
39functionhandleError(error){
40
41}
42</script>
43</html>
复制代码
convertor.js文件：
复制代码
1(function(){//闭包
2functionload_script(xyUrl,callback){
3varhead=document.getElementsByTagName('head')[0];
4varscript=document.createElement('script');
5script.type='text/javascript';
6script.src=xyUrl;
7//借鉴了jQuery的script跨域方法
8script.onload=script.onreadystatechange=function(){
9if((!this.readyState||this.readyState==="loaded"||this.readyState==="complete")){
10callback&&callback();
11//HandlememoryleakinIE
12script.onload=script.onreadystatechange=null;
13if(head&&script.parentNode){
14head.removeChild(script);
15}
16}
17};
18//UseinsertBeforeinsteadofappendChildtocircumventanIE6bug.
19head.insertBefore(script,head.firstChild);
20}
21functiontranslate(point,type,callback){
22varcallbackName='cbk_'+Math.round(Math.random()*10000);//随机函数名
23varxyUrl="http://api.map.baidu.com/ag/coord/convert?from="+type
24+"&to=4&x="+point.lng+"&y="+point.lat
25+"&callback=BMap.Convertor."+callbackName;
26//动态创建script标签
27load_script(xyUrl);
28BMap.Convertor[callbackName]=function(xyResult){
29deleteBMap.Convertor[callbackName];//调用完需要删除改函数
30varpoint=newBMap.Point(xyResult.x,xyResult.y);
31callback&&callback(point);
32}
33}
34
35window.BMap=window.BMap||{};
36BMap.Convertor={};
37BMap.Convertor.translate=translate;
38})();
复制代码
相关推荐
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...