简单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字体效果的设置方法小结
Jun 13 HTML / CSS
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
Aug 18 HTML / CSS
css3的transform造成z-index无效解决方案
Dec 04 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
Sep 06 HTML / CSS
HTML5进度条特效
Dec 18 HTML / CSS
详解HTML5中的元素与元素
Aug 17 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 HTML / CSS
html5 制作地图当前定位箭头的方法示例
Jan 10 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 HTML / CSS
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
Nov 11 HTML / CSS
css3手动实现pc端横向滚动
Jun 21 HTML / CSS
使用HBuilder制作一个简单的HTML5网页
Jul 07 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
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
php strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
php中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
php动态生成函数示例
2014/03/21 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
php递归实现无限分类的方法
2015/07/28 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
PHP缓冲区用法总结
2016/02/14 PHP
php数据访问之查询关键字
2016/05/09 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
JS的get和set使用示例
2014/02/20 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
详解JavaScript中的坐标和距离
2019/05/27 Javascript
浅谈用VSCode写python的正确姿势
2017/12/16 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
运动会开幕式邀请函
2014/01/22 职场文书
高中生职业规划范文
2014/03/09 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
2014年政教处工作总结
2014/12/20 职场文书
情人节活动总结范文
2015/02/05 职场文书
2015年推普周活动总结
2015/03/27 职场文书