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.-------抽象类，抽象方法

    抽象类:抽象类不能实例化,类中的方法必须经过子类的重写实现 类里的方法是public修饰时,子类可重写也可不重写 类的方法是abstract修饰时,方法是抽象方法,子类必须重写该方法 类的方法用fin ...

  2. jQuery中的$.extend方法来扩展JSON对象及合并，方便调用对象方法

    $.extend方法可以扩展JSON对象,用一个或多个其他对象来扩展一个对象,返回被扩展的对象. 例一 合并 settings 和 options,修改并返回 settings var setting ...

  3. 解决motools和jquery之间的冲突

    在同一个页面需要同时使用motools和jquery,对于$,发生了冲突,以下是解决的办法. <head> <script src="./Scripts/lib/jquer ...

  4. 在Android中，使用Kotlin的 API请求简易方法

    原文标题:API request in Android the easy way using Kotlin 原文链接:http://antonioleiva.com/api-request-kotli ...

  5. react-native-vector-icons的简单使用,图片,按钮,标签视图,导航条

    ICONS是可以直接使用图片名, 就能加载图片的三方,使用很方便, 你不需要在工程文件夹里塞各种图片, 节省很多空间,下面就来看看怎么使用吧! 1. 首先打开terminal进入到我们的工程文件夹下, ...

  6. Highchart基础教程－图表的主要组成

    一.Highchar图表的主要组成 1.图表标题(Title):图表包含标题和副表题(subTitle,可选). 2.坐标轴(Axis):包括x轴(xAxis)和y轴(yAxis).多个数据列可以共同 ...

  7. linux Mysql 安装及配置

    1.准备 cmake-3.6.0.tar.gz bison-3.0.4.tar.gz mysql-5.7.13.tar.gz (http://dev.mysql.com/get/Downloads/M ...

  8. React Native APP结构探索

    APP结构探索 我在Github上找到了一个有登陆界面,能从网上获取新闻信息的开源APP,想来研究一下APP的结构. 附上原网址:我的第一个React Native App 具体来讲,就是研究一个复杂 ...

  9. git-入门

    一.简介 Git是目前世界上最先进的分布式版本控制系统,Git中绝大部分操作都是访问本地资源,不需要网络,其中有三个概念比较重要:1. 工作目录 2. 暂存区域 3.本地仓库. 简单说明一下,工作目录 ...

  10. 多War项目中静态文件的共享方案

    [原创申明:文章为原创,欢迎非盈利性转载,但转载必须注明来源] 在互联网产品中,一般会有多个项目(Jar.WAR)组成一个产品线.这些WAR项目,因为使用相同的前端架构(jQuery.easyui等) ...