<!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. jquery学习笔记---闭包，原型链，this关键字

    网上的资料很多,关于闭包,原型链,面向对象之内的.本人也有一点自己的总结. 关于this: this 的值取决于 function 被调用的方式,一共有四种, 如果一个 function 是一个对象的 ...

  2. 菜鸟学Linux命令:nohup命令启动程序

    在UNIX/LINUX中,普通进程用&符号放到后台运行,如果启动该程序的控制台logout,则该进程随即终止. 要实现守护进程,一种方法是按守护进程的规则去编程,比较麻烦:另一种方法是仍然用普 ...

  3. Pyqt QTabWidget 简单的计算器集合

    今天我们简单介绍下QTabWidget,然后在加入Demo计算器 首先我先讲下文件的结构: 文件分四部分, 一部分是Ui设计文件, 一部分是由Ui生成的py文件, 一部分是 计算器的逻辑文件,  最后 ...

  4. node 初识

    跟随startup engineering 已经到了week2了,目前为止课程都没有详细介绍node,恐怕以后也不会讲得太细,只是罗列出了一堆阅读材料供你自学.花了点时间阅读些许,在此做个墨迹. Ho ...

  5. wp8 入门到精通 测量代码执行时间

    Stopwatch time = new Stopwatch(); byte[] target = new byte[size]; for (int j = 0; j < size; j++) ...

  6. jquery mobile 转场闪屏的解决

     jqm转场闪屏是用phonegap生成apk非常容易遇到的问题,暂时貌似还是没有完美的解决方案,网上暂时有一些方案,个人都尝试了一下发现还是改背景比较有效,总结如下: 改变默认css文件: .ui- ...

  7. UED

    User Experience Design(用户体验设计),简称UED.UED是进行产品策划的主力之一,他们用自己的知识.经验.设计能力拿出设计方案. UED不只是互联网专家,还是行业专家.能够用自 ...

  8. 在Salesforce中通过dataloadercliq调用data loader来批量处理数据

    上一篇文章讲到,通过data loader去批量处理数据,那么这篇文章将主要讲解在Salesforce中通过dataloadercliq调用data loader来批量处理数据. 1): CLIq文件 ...

  9. HTML Entity Sets - All

    http://www.htmlentities.com/html/entities/ The view below displays the characters used in the offici ...

  10. CE搜索内存数据的原理

      最近发现有朋友在玩游戏时, 使用一款工具来修改游戏的部分数据,作弊的效果, 也就是CE(Cheat Engine),这款工具是 delphi 编写的, 于是好奇, 然后瞬间想到API OpenPr ...