HTML5 Geolocation API 用于获得用户的地理位置。

如果用户不允许定位，那么用户信息是不可用的。

获取用户的位置：getCurrentPosition() 返回数据如下

返回用户当前位置： watchPosition()

返回用户的当前位置，并继续返回用户移动时的更新位置。也可使用setinterval()自定义时间执行一次定位函数。

clearWatch()用于停止 watchPosition() 方法

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的key"></script>

    <title>定位</title>

</head>

<body>

    <h1>Html5定位</h1>

    <p id="longitude"></p><!-- 经度值 -->

    <p id="latitude"></p><!-- 纬度值 -->

    <p id="accuracy"></p><!-- 误差值 -->

    <!--<input type="button" value="创建地图" onclick="creatMap()">-->

    <div style="width:370px;height:550px;border:#ccc solid 1px;" id="dituContent"></div><!-- 地图容器 -->

    <script src="jquery-1.11.3.js"></script>

    <script>

    //如果支持,获取位置信息

    if(navigator.geolocation){

        navigator.geolocation.getCurrentPosition(

                //locationSuccess

                function(position){

                    showPosition(position);//显示经纬度值

                    creatMap();//创建地图

                },

                //locationError

                function(error){

                    var errorType = ['您拒绝共享位置信息', '获取不到位置信息', '获取位置信息超时'];

                    alert(errorType[error.code - 1]);

                }

        );

        navigator.geolocation.watchPosition(showPosition);

        }else{

            //document.getElementById('geo_loc').innerHTML="您的浏览器不支持地图定位";

            $('#geo_loc').html("您的浏览器不支持地图定位")

        }

        function showPosition(position){

            //在页面上显示经纬度(此处显示的是getLocation获得的经纬度值)

            $('#longitude').html(position.coords.longitude)

            $('#latitude').html(position.coords.latitude)

            //显示误差值

            $('#accuracy').html("误差"+position.coords.accuracy)

        }

        function creatMap(){

            var localLongitude = $('#longitude').text();//getLocation得到的经纬度值

            var localLatitude = $('#latitude').text();

            //根据getLocation得到的经纬度坐标直接创建地图，有很大误差，需要转换为百度的经纬度坐标。
　　　　　　　//请求百度接口转换坐标

            var newpoit = 'http://api.map.baidu.com/geoconv/v1/?coords='+localLongitude+','+localLatitude+'&from=1&to=5&ak=你的key';

            $.ajax({

                type:"POST",

                async:false,

                url:newpoit,

                dataType:"jsonp",

                success:function(data){

                    if(parseInt(data.status)==0){//请求成功

                        $.each(data.result,function(i,item){

                            //获转换后的经纬度

                            var baiduLongitude = item.x;

                            var baiduLatitude = item.y;

                            //创建地图

                            var map = new BMap.Map("dituContent");

                            map.centerAndZoom(new BMap.Point(baiduLongitude,baiduLatitude),15);

                            map.enableScrollWheelZoom(true);

                            var new_point = new BMap.Point(baiduLongitude,baiduLatitude);

                            var marker = new BMap.Marker(new_point);  // 创建标注

                            map.addOverlay(marker);              // 将标注添加到地图中

                            map.panTo(new_point);

                        })

                    }

                },

                error:function(e){

                }

            })

        }

</script>

</body>

</html>

html5定位getLocation()的更多相关文章

  1. 利用HTML5定位功能，实现在百度地图上定位

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 利用HTML5定位功能，实现在百度地图上定位（转）

    原文:利用HTML5定位功能,实现在百度地图上定位 代码如下: 测试浏览器:ie11定位成功率100%,Safari定位成功率97%,(add by zhj :在手机上测试(用微信内置浏览器打开),无 ...

  3. HTML5定位使用心得

    最近项目中接到一个需求,需要使用百度地图API和HTML5定位特性. 对于百度地图API,没啥好说的,刨它的API就是了. 今天想说说JS定位特性. 浏览器支持 Internet Explorer 9 ...

  4. HTML5定位功能，实现在百度地图上定位

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. html5定位并在百度地图上显示

    在开发移动端 web 或者webapp时,使用百度地图 API 的过程中,经常需要通过手机定位获取当前位置并在地图上居中显示出来,这就需要用到html5的地理定位功能. navigator.geolo ...

  6. html5 定位

    需要实现的功能:移动端的网页,能定位到中文地址. 百度地图能实现这样的功能. 之前精度差得原因是,我用自己的mac做服务器,用手机来浏览定位,这样只能定位到mac 的地址,mac上浏览器的地址就没准了 ...

  7. html5定位获取当前位置并在百度地图上显示

    用html5的地理定位功能通过手机定位获取当前位置并在地图上居中显示出来,下面是百度地图API的使用过程,有需要的朋友可以参考下 在开发移动端 web 或者webapp时,使用百度地图 API 的过程 ...

  8. html5 定位 获得当前位置的经纬度

    if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, showError, { // ...

  9. HTML5地理定位(已知经纬度，计算两个坐标点之间的距离)

    事实上,地球上任意两个坐标点在地平线上的距离并不是直线,而是球面的弧线. 下面介绍如何利用正矢公式计算已知经纬度数据的两个坐标点之间的距离.半正矢公式也成为Haversine公式,它最早时航海学中的重 ...

随机推荐

  1. 使用MyBatis Generator自动创建代码(dao,mapping,poji)

    连接的数据库为SQL server2008,所以需要的文件为sqljdbc4.jar 使用的lib库有: 在lib库目录下新建一个src文件夹用来存放生成的文件,然后新建generatorConfig ...

  2. git教程

    http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000

  3. kmdjs和循环依赖

    循环依赖 循环依赖是非常必要的,有的程序写着写着就循环依赖了,可以提取出一个对象来共同依赖解决循环依赖,但是有时会破坏程序的逻辑自封闭和高内聚.所以没解决好循环依赖的模块化库.框架.编译器都不是一个好 ...

  4. 一步步实现ABAP后台导入EXCEL到数据库【1】

    在SAP的应用当中,导入.导出EXCEL文件的情况是一个常见的需求,有时候用户需要将大量数据定期导入到SAP的数据库中.这种情况下,使用导入程序在前台导入可能要花费不少的时间,如果能安排导入程序为后台 ...

  5. android 自定义控件——（三）水平线、虚线

    ----------------------------------View虚线或者直线(源代码下有属性解释)--------------------------------------------- ...

  6. Titanium.UI.createAlertDialog

    学习TI 记录一下 1.确认对话框 Js代码 var a = Titanium.UI.createAlertDialog({ title:'添加人员信息', message:"人员添加成功& ...

  7. C#使用ADO.NET访问数据库（一）

    博主好久没更新博客了,最近有点忙(打麻将0.0..),今天更新一篇C#的,我还是想坚持更新博客,分享一下自己的心得,闲话少说,开始正题~~ ADO.NET概述:ADO.NET的作用在于他是客户端访问服 ...

  8. C# 知识特性 Attribute

    C#知识--获取特性 Attribute 特性提供功能强大的方法,用以将元数据或声明信息与代码(程序集.类型.方法.属性等)相关联.特性与程序实体关联后,可在运行时使用"反射"查询 ...

  9. Mysql 的特殊之处

    互联网公司一般都会选择在互联网得到广泛应用的Mysql,但之前一直用微软的东东,包括数据库(MS SQLServer). 这不本以为切换数据库so easy,但是还是有些细节需要注意. 数据类型 Da ...

  10. 前端编辑工具之VSCode

      因为前段时间看了瞬息之间的一篇文章编辑器背后的程序观, 里面只提到了Visual studio. 我想想可能是因为非.Net开发者,所以不知道Visual sutdio code这个工具.来看看V ...