<!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. Shell编程基础教程3--Shell输入与输出

    3.Shell输入与输出    3.1.echo        echo命令可以显示文本行或变量,或者把字符串输出到文件        echo [option] string             ...

  2. log4j设置日志格式为UTF-8

    想要log4j输出的日志文件的编码格式为UTF-8.正常情况下只需要添加下述的代码即可: log4j.appender.appender_name.Encoding=UTF-8 但是在spring与l ...

  3. mac下php开发环境搭建＋CI框架使用

    一.启动apache: apachectl start 停止: apachectl stop 配置文件: vi /etc/apache2/httpd.conf 一.修改端口 因为80端口不想被占用,8 ...

  4. bzoj 1415 期望+记忆化搜索 ****

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAdkAAAIfCAIAAACzfDFhAAAgAElEQVR4nOy9bVwTW57vm5fnhed+Pn

  5. 单例模式/singleton模式/创建型模式

    Java实现要点: 私有构造方法 线程安全(并发的考虑) 延迟加载(效率的考虑,对于较大的类在使用时在加载) 公有方法访问单一实例 常见单例模式代码及问题 //无延迟加载,常驻内存(即使不使用) cl ...

  6. Ring3无敌进程让你的进程变得和smss.exe一样支持64

    本帖最后由 奋斗丶小Z 于 2016-6-6 13:39 编辑 此函数可以启用或关闭开启之后变得和系统进程一样被杀系统直接蓝屏系统进程也是此函数实现的上图 可以用于进程保护 <ignore_js ...

  7. animation动画兼容所有手机

    .canvasAnim{ position: absolute; width:240px; height:240px; top:; z-index:; top:-20px; left:-5px; bo ...

  8. hash 分区的用途是什么?

    Hash partitioning enables easy partitioning of data that does not lend itself to rangeor list partit ...

  9. 【前台 】字符串和js对象的相互转化

    利用原生JSON对象,将对象转为字符串 var jsObj = {}; jsObj.testArray = [1,2,3,4,5]; jsObj.name = 'CSS3'; jsObj.date = ...

  10. hdu 1251 字典树的应用

    这道题看了大神的模板,直接用字典树提交的会爆内存,用stl 里的map有简单有快 #include <iostream> #include <map> #include < ...