<!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. hdu 1249 三角形

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1249 part=3*s*(s-1)+2 #include<stdio.h> #includ ...

  2. Eclipse的使用及Java程序的标识符和关键字

    Eclipse的使用 (1)创建Java项目 选择“文件”/“新建”/“Java项目”命令,在弹出的“新建Java项目”对话框输入项目名,然后点击“下一步”,最后单击“完成”. (2)创建Java类文 ...

  3. max number of threads [1024] for user [lish] likely too low, increase to at least [2048]

    # cat /etc/security/limits.d/-nproc.conf # Default limit for number of user's processes to prevent # ...

  4. zip 压缩文件 unzip查看zip压缩包内的内容

    [root@GitLab tmp]# zip -r new.zip ./*  adding: gitlab_key_file20161001-2668-1eu44mv (deflated 15%)  ...

  5. 启动ip转法功能

    这种方法无需重启: [root@ha02 ~]# cat /proc/sys/net/ipv4/ip_forward [root@ha02 ~]# sysctl -w net.ipv4.ip_forw ...

  6. javascript - DOM对象控制HTML元素详解

    1.方法   getElementsByName() -- 获取name getElementByTagName() -- 获取  getAttribute()         --获取元素属性 se ...

  7. java中常用的工具类（一）

    我们java程序员在开发项目的是常常会用到一些工具类.今天我汇总了一下java中常用的工具方法.大家可以在项目中使用.可以收藏!加入IT江湖官方群:383126909 我们一起成长 一.String工 ...

  8. TortoiseSVN常用批处理命令 分类： C# 2014-08-09 11:31 648人阅读 评论(1) 收藏

    TortoiseSVN作为源代码管理软件,估计用过的都会说好,在Windows下,配合批处理命令,往往可以事半功倍,整理了下常用的批处理命令: (将下面的内容修改后,保存为*.bat文件执行即可) : ...

  9. jquery audio player

    <!DOCTYPE html><html lang="en"> <head>  <meta charset="utf-8&quo ...

  10. HDU 2896 病毒侵袭（AC自动机）

    病毒侵袭 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...