html5定位getLocation()

时间：2022-01-09 12:20:37

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

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

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

html5定位getLocation()

返回用户当前位置： 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地理定位&lpar;已知经纬度，计算两个坐标点之间的距离&rpar;

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

随机推荐

  1. android java数组应用与说明

    如果定义类或结构数据则需每个都进行创建才可以使用,不然都为null 如: PointF pts[] = new PointF[5] ;//pts[0].x =CSSliderSize / 2;//这样 ...

  2. C&num; 获取MAC地址

    /********************************************************************** * C# 获取MAC地址 * 说明: * 在C#中获取本 ...

  3. Chrome 开发者工具使用技巧

    最近我花了较多的时间使用 Chrome 的开发者工具.我发现了很多之前没用过的好功能 (或还不是特别需要用到的功能,例如 blackboxing 和 asynchronous stacktraces) ...

  4. 使用wordpress自带ajax方法

    css3 提示只适用于高级浏览器: ChromeFirefoxSafariIE9+ valid.invalid.required的定义 代码如下 复制代码 input:required, input: ...

  5. Linux vmstat：报告虚拟内存统计的工具

    众所周知,计算机必须有称之为RAM(随机访问内存)的存储器使得计算机工作.RAM指的是插在计算机主板上的物理存储.这里的RAM被用于加载像浏览器.文字处理器这类的程序,实际上,你使用的程序都运行在内存 ...

  6. 使用简单的 5 个步骤设置 Web 服务器集群

    通过在多个处理器之间分担工作负载并采用多种软件恢复技术,能够提供高度可用的环境并提高环境的总体 RAS(可靠性.可用性和可服务性).可以得到的好处包括:更快地从意外中断中恢复运行,以及将意外中断对终端 ...

  7. Aspose&period;Words：如何添加另一个WORD文档中的Node对象

    原文:Aspose.Words:如何添加另一个WORD文档中的Node对象 首先看一段代码,这段代码意图从docSource中获取第一个表格,并插入docTarget的末尾: , true); doc ...

  8. 在CYGWIN下编译和运行软件Bundler ，以及PMVS，CMVS的编译与使用

    本人按照 http://blog.csdn.net/zzzblog/article/details/17166869 http://oliver.zheng.blog.163.com/blog/sta ...

  9. 查看apk文件包名的一些方法

    1,如果有源码 直接将apk包修改为zip,并解压找到AndroidManifest.xml文件,在文件中搜索“package”找到相应的包名 2,使用adb命令 前提是已经下载android SDK ...

  10. pymouse 点击指定坐标点

    from pymouse import PyMouse mouse = PyMouse() mouse.click(,)

相关文章