<!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. Linux 通过os进程pid找到端口号

    [root@xxxx conf]# netstat -lutpn|grep tcp /java tcp /java tcp /java tomcat 监听的一些端口

  2. jQuery – 6.选择器

    1. 属性过滤选择器: 1. $("div[id]")选取有id属性的<div> 2. $("div[title=test]")选取title属性为 ...

  3. CPU工作状态的知识介绍

    转自:http://www.bbwxbbs.com/forum.php?mod=viewthread&tid=2552   近几年,个人计算机的运行速度有了质的飞跃,但是功耗却没能与时俱进,着 ...

  4. vim、gvim加载文件慢

    1. strace -f -T -o vim.strace vim 2. vim --startuptime "vim-time.txt" 3. gvim -f

  5. 【转载】Pyqt 添加右键菜单方法

    转载地址: http://www.cnblogs.com/yogalau/p/3954042.html?utm_source=tuicool QListWidget 是继承 QWidget 的, 所以 ...

  6. Microsoft SQL Server 博客目录

    基础概念篇 SQL Server排序规则 SQL SERVER 统计信息概述(Statistics) SQL SERVER 索引之聚集索引和非聚集索引的描述 Sql Server 索引之唯一索引和筛选 ...

  7. 攻城狮在路上（肆）How tomcat works（零） 前言说明

    最近几篇是关于How tomcat works一书的读书笔记. 通过数个章节逐渐实现一个tomcat的功能. 源码下载地址:http://zhidao.baidu.com/share/7007af0f ...

  8. FZU Problem 2082 过路费 树链剖分

    Problem 2082 过路费    Problem Description 有n座城市,由n-1条路相连通,使得任意两座城市之间可达.每条路有过路费,要交过路费才能通过.每条路的过路费经常会更新, ...

  9. Java学习笔记（七）——对象

    一.类与对象 1.类的定义 类就是模型,确定对象将会拥有的特征(属性)和行为(方法). 2.类的特点 (1)类是对象的类型 (2)具有相同属性和方法的一组对象的集合. 3.对象的属性: 对象具有的各种 ...

  10. 用Access作为后台数据库支撑。

    /// <summary> /// 读取Excel文档 /// </summary> /// <param name="Path">文件名称&l ...