简单html5代码获取地理位置


Posted in HTML / CSS onMarch 31, 2014

简单html5代码获取地理位置 

复制代码
代码如下:

/**
* 以下为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';
}
HTML / CSS 相关文章推荐
使用css3制作动感导航条示例
Jan 26 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
CSS3制作Dropdown下拉菜单的方法
Jul 18 HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 HTML / CSS
Html5如何唤起百度地图App的方法
Jan 27 HTML / CSS
使用CSS实现弹性视频html5案例实践
Dec 26 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 HTML / CSS
HTML基础详解(上)
Oct 16 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 HTML / CSS
HTML5注册页面示例代码
Mar 27 #HTML / CSS
html5实现微信打飞机游戏
Mar 27 #HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
Mar 26 #HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 #HTML / CSS
用html5实现语音搜索框的方法
Mar 18 #HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
Mar 18 #HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 #HTML / CSS
You might like
实用函数2
2007/11/08 PHP
一个比较简单的PHP 分页分组类
2009/12/10 PHP
php下关于中英数字混排的字符串分割问题
2010/04/06 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
python的pip安装以及使用教程
2018/09/18 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
基于python实现FTP文件上传与下载操作(ftp&sftp协议)
2020/04/01 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
美国户外服装和装备购物网站:Outland USA
2020/03/22 全球购物
介绍一下JMS编程步骤
2015/09/22 面试题
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
外国人来华邀请函
2015/01/31 职场文书
教师节座谈会主持词
2015/07/03 职场文书
聘用合同范本
2015/09/21 职场文书
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技