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. 关于Java泛型的使用

    在目前我遇到的java项目中,泛型应用的最多的就属集合了.当要从数据库取出多个对象或者说是多条记录时,往往都要使用集合,那么为什么这么使用,或者使用时有什么要注意的地方,请关注以下内容. 感谢Wind ...

  2. 工业物联网或系统集成中应用消息队列（ActiveMQ，C#的demo）的场景全面分析

    1.[连载]<C#通讯(串口和网络)框架的设计与实现> 2.[开源]C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 2.应用SuperIO(SIO)和开源跨平台物联网框 ...

  3. 利用sphinx为python项目生成API文档

    sphinx可以根据python的注释生成可以查找的api文档,简单记录了下步骤 1:安装 pip install -U Sphinx 2:在需要生成文档的.py文件目录下执行sphinx-apido ...

  4. 排序 order by 的用法

    order by  跟在select* from 后面 order by 默认的是升序, asc 升序  desc 降序 select * from 表名 order by  字段名  asc 在带有 ...

  5. T-SQL 转义select … like中的特殊字符(百分号)

    众所周知,T-SQL中LIKE运算符使用%符号表示通配符.很多时候可能需要查询包含有%的数据,比如需要查询字段coupon中含有5%的数据.那么如何使用已经有百分号(%)符号的LIKE搜索字符串呢? ...

  6. Java线程并发：知识点

    Java线程并发:知识点   发布:一个对象是使它能够被当前范围之外的代码所引用: 常见形式:将对象的的引用存储到公共静态域:非私有方法中返回引用:发布内部类实例,包含引用.   逃逸:在对象尚未准备 ...

  7. Linux Shell脚本逻辑操作符简介

    在写程序时,会用到条件判断,测试条件是否成立.很多时候,判断条件是多个的,这个时候需要用到逻辑操作符.shell脚本中常用的有哪些逻辑操作符呢? 1.逻辑与: -a 格式: conditon1 -a ...

  8. Spring之BeanFactory及Bean生命周期

    1.spring通过BeanFactory灵活配置.管理bean,Spring对管理的bean没有任何特别的要求,完全支持对POJO的管理: 2.BeanFactory有个ApplicationCon ...

  9. spring3系列一

    IOC基础 Ioc是什么 Ioc--Inversion of Control 控制反转,不是什么技术,而是一种设计思想.在java开发中,ioc意味着将你设计好的对象交给容器控制,而不是传统的在你的对 ...

  10. python-进程&线程

    进程(process):相当于一个程序要运行时所需的所有资源的集合,相当于一个车间,不工作 两个进程之间的数据不共享,完全不独立,互相不能访问. 线程(thread):一道单一指令的控制流,寄生在进程 ...