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面试题整理一（侧重多线程并发）

    1..是否可以在static环境中访问非static变量? 答:static变量在Java中是属于类的,它在所有的实例中的值是一样的.当类被Java虚拟机载入的时候,会对static变量进行初始化.如 ...

  2. 使用JQuery统计input和textarea文字输入数量代码

    本文主要介绍了jQuery实现统计输入文字个数的方法,需要的朋友可以参考下. HTML部分: <input type="text" value="我是输入的文字&q ...

  3. 腾讯AlloyTeam移动Web裁剪组件AlloyCrop正式开源

    传送门 Github地址:https://github.com/AlloyTeam/AlloyFinger/tree/master/alloy_crop 在线Demo演示: 简介 裁剪图片的应用场景有 ...

  4. SAP(ABAP) 显示等待图标的FM：SAPGUI_PROGRESS_INDICATOR-SAP进度条

    在执行一些数据量大的报表时候,为了防止用户认为是死机,可以再程序中添加正在处理的图标,可以CALL一个 FM来实现. CALL FUNCTION 'SAPGUI_PROGRESS_INDICATOR' ...

  5. Android Weekly Notes Issue #219

    Android Weekly Issue #219 August 21st, 2016 Android Weekly Issue #219 ARTICLES & TUTORIALS Andro ...

  6. mac下查看.mobileprovision文件及钥匙串中证书.cer文件

    mac下查看.mobileprovision文件及钥匙串中证书.cer文件 一. mobileprovision文件查看 xxx.mobileprovision是ios开发中的设备描述文件,里面有证书 ...

  7. IT软件的编程方向 - 进阶者系列 - 学习者系列文章

    IT软件经过了这么些年的发展,已经形成了很多的软件公司和开发团队,而且当前编程语言也有很多种,让开发人员能够有很大的选择.现在国际上的开发阵营基本分为ASP.NET.JAVA和PHP三种,但是每种开发 ...

  8. oracle触发器

    类型 行级触发器: FOR EACH ROW 影响的每一行都会执行触发器 语句级出发器 默认的模式,一句话才执行一次触发器 触发器不能嵌套,不能含有事务控制语句 何时触发 Before:条件运行前 A ...

  9. Linux下面安装MySQL

  10. 【C++】类和对象（构造与析构）

    类 类是一种抽象和封装机制,描述一组具有相同属性和行为的对象,是代码复用的基本单位. 类成员的访问权限 面向对象关键特性之一就是隐藏数据,采用机制就是设置类成员的访问控制权限.类成员有3种访问权限: ...