<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <title>大名</title>

    <meta content="yes" name="apple-mobile-web-app-capable"/>

    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>

    <meta content="telephone=no" name="format-detection"/>

</head>

<body>

2121212121212wwwwwwwwwww

 <button id="testbutton">测试按钮</button>

 <script type="text/javascript">

 /**

* 以下为html5代码,获取地理位置

*/

function getLocation() {

    //检查浏览器是否支持地理位置获取

    if (navigator.geolocation) {

        //若支持地理位置获取,成功调用showPosition(),失败调用showError

//        alert("正在努力获取位置...");

        var config = { enableHighAccuracy: true, timeout: 5000, maximumAge: 30000 };

        navigator.geolocation.getCurrentPosition(showPosition, showError, config);

    } else {

        //alert("Geolocation is not supported by this browser.");

        alert("定位失败,用户已禁用位置获取权限");

    }

}

/**

* 获取地址位置成功

*/

function showPosition(position) {

    //获得经度纬度

    var x = position.coords.latitude;

    var y = position.coords.longitude;

    //配置Baidu Geocoding API

    var url = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b" +

            "&callback=renderReverse" +

            "&location=" + x + "," + y +

            "&output=json" +

            "&pois=0";

    $.ajax({

        type: "GET",

        dataType: "jsonp",

        url: url,

        success: function (json) {

            if (json == null || typeof (json) == "undefined") {

                return;

            }

            if (json.status != "0") {

                return;

            }

            setAddress(json.result.addressComponent);

        },

        error: function (XMLHttpRequest, textStatus, errorThrown) {

            alert("[x:" + x + ",y:" + y + "]地址位置获取失败,请手动选择地址");

        }

    });

}

/**

* 获取地址位置失败[暂不处理]

*/

function showError(error) {

    switch (error.code) {

        case error.PERMISSION_DENIED:

            alert("定位失败,用户拒绝请求地理定位");

            //x.innerHTML = "User denied the request for Geolocation.[用户拒绝请求地理定位]"

            break;

        case error.POSITION_UNAVAILABLE:

            alert("定位失败,位置信息是不可用");

            //x.innerHTML = "Location information is unavailable.[位置信息是不可用]"

            break;

        case error.TIMEOUT:

            alert("定位失败,请求获取用户位置超时");

            //x.innerHTML = "The request to get user location timed out.[请求获取用户位置超时]"

            break;

        case error.UNKNOWN_ERROR:

            alert("定位失败,定位系统失效");

            //x.innerHTML = "An unknown error occurred.[未知错误]"

            break;

    }

}

/**

 * 设置地址

 */

function setAddress(json) {

    var position = document.getElementById("txtPosition");

    //省

    var province = json.province;

    //市

    var city = json.city;

    //区

    var district = json.district;

    province = province.replace('市', '');

    position.value = province + "," + city + "," + district;

    position.style.color = 'black';

}

var button = document.getElementById("testbutton");

button.onclick = function(){

getLocation();

}

 </script>

</body>

</html>

html5代码,获取地理位置的更多相关文章

  1. Html5 Geolocation获取地理位置信息

    Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置.基于此特性可以开发基于位置的服务应用.在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用. ...

  2. AngularJS进阶(二十)HTML5实现获取地理位置信息并定位功能

    HTML5实现获取地理位置信息并定位功能 注:请点击此处进行充电! 前言 这篇文章主要介绍了HTML5实现获取地理位置信息并定位功能,本文讲解了原生HTML5.百度地图.谷歌地图等三种获取理位置信息并 ...

  3. Html5 Geolocation获取地理位置信息(转)

    Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置.基于此特性可以开发基于位置的服务应用.在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用. ...

  4. html5实现获取地理位置信息并定位

    这里主要讲h5实现获取地理位置信息并定位功能,本文讲解了原生h5,百度地图,谷歌地图等三种获取地理信息并定位的方法,需要的朋友可以参考下: h5提供了地理位置功能(Geolocation API),能 ...

  5. HTML5实现获取地理位置信息并定位功能

    HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用.本文结合实例给大家分享如何使用HTML5,借助百度.谷歌地 ...

  6. 获取地理位置的html5代码

    /** * 以下为html5代码,获取地理位置 */ function getLocation() { //检查浏览器是否支持地理位置获取 if (navigator.geolocation) { / ...

  7. html5获取地理位置信息API

    html5获取地理位置信息API 在HTML5中,可以看下如何使用Geolocation API来获得用户的地理位置信息,如果该浏览器支持的话,且设备具有定位功能,就能够直接使用这组API来获取当前位 ...

  8. 微信公众平台网页开发实战--3.利用JSSDK在网页中获取地理位置（HTML5+jQuery）

    复制一份JSSDK环境,创建一份index.html文件,结构如图7.1所示. 图7.1  7.1节文件结构 在location.js中,封装“getLocation”接口,如下: 01 wxJSSD ...

  9. HTML5 获取地理位置信息

    HTML5增加的新功能,获取地理位置信息,如果浏览器支持且设备有定位功能,就能够直接使用这组API来获取当前信息位置.该Geolocation API可以应用于移动设备中的地理位置. Geolocat ...

随机推荐

  1. sqlite建表语句(特别是外键问题)

    原创  sqlite建表语句(特别是外键问题) 下面图表示两个表关系: //表1User_invitecreate table User_invite(Invite_id INTEGER PRIMAR ...

  2. 写了个简单的pdo的封装类

    <?php class PD { //造对象 public $dsn = "mysql:dbname=test2;host=localhost"; //数据库类型,数据库名和 ...

  3. MVC – 6.控制器 Action方法参数与返回值

      6.1 Controller接收浏览器数据   a.获取Get数据 : a1:获取路由url中配置好的制定参数: 如配置好的路由: 浏览器请求路径为: /User/Modify/1 ,MVC框架获 ...

  4. SQLServer内置函数

    类型转换函数cast和convert --cast一般更容易使用,convert的优点是可以格式化日期和数值 select CAST('123.4' as int) --失败 select CONVE ...

  5. sdut 2125串结构练习--字符串匹配【两种KMP算法】

    串结构练习——字符串匹配 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目链接:http://acm.sdut.edu.cn/sduto ...

  6. windows常用命令

    打开"运行"对话框(Win+R),输入cmd,打开控制台命令窗口... 也可以通过cmd /c 命令 和 cmd /k 命令的方式来直接运行命令 注:/c表示执行完命令后关闭cmd ...

  7. AngularJS 之 Factory、Service、Provider

    当你初试 Angular 时,很自然地就会往 controller 和 scope 里堆满不必要的逻辑.一定要早点意识到,controller 这一层应该很薄:也就是说,应用里大部分的业务逻辑和持久化 ...

  8. 运维自动化之ansible的安装与使用（包括模块与playbook使用）(转发)

    原文  http://dl528888.blog.51cto.com/2382721/1435415 我使用过puppet(地址是http://dl528888.blog.51cto.com/2382 ...

  9. PHP_Memcache函数详解

    memcache函数所有的方法列表如下: Memcache::add – 添加一个值,如果已经存在,则返回false Memcache::addServer – 添加一个可供使用的服务器地址 Memc ...

  10. python调用系统命令popen、system

    python调用Shell脚本,有两种方法:os.system(cmd)或os.popen(cmd),前者返回值是脚本的退出状态码,后者的返回值是脚本执行过程中的输出内容.所以说一般我们认为popen ...