简单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实现地球自转实现代码(图文教程附送源码)
Dec 26 HTML / CSS
发现两个有趣的CSS3动画效果
Aug 14 HTML / CSS
css3实现背景图片拉伸效果像桌面壁纸一样
Aug 19 HTML / CSS
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
CSS的pointer-events属性详细介绍(作用和注意事项)
Apr 23 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
使用CSS3制作响应式导航菜单的方法
Jul 12 HTML / CSS
CSS3 实现的加载动画
Dec 07 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 HTML / CSS
使用phonegap获取位置信息的实现方法
Mar 31 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 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
PHP的宝库目录--PEAR
2006/10/09 PHP
关于访问控制的一首PHP面试题(对属性或方法的访问控制)
2012/09/13 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
php绘制圆形的方法
2015/01/24 PHP
为你总结一些php系统类函数
2015/10/21 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
js定时器实例分享
2016/12/20 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
常用jQuery选择器汇总
2017/02/02 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
python读取文件名称生成list的方法
2018/04/27 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
西安当代医院管理研究院笔试题
2015/12/11 面试题
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
婚礼证婚人证婚词
2014/01/13 职场文书
五年级学生评语
2014/04/22 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
2015年教务工作总结
2015/05/23 职场文书
冰雪公主观后感
2015/06/16 职场文书
合作合同协议书
2016/03/21 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书