简单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 21 HTML / CSS
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
May 07 HTML / CSS
使用CSS3来制作消息提醒框
Jul 12 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
Aug 06 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 HTML / CSS
CSS子盒子水平和垂直居中的五种方法
Jul 23 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操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
PHP随机生成随机个数的字母组合示例
2014/01/14 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
[36:17]DOTA2上海特级锦标赛 - VGL音乐会全集
2016/03/06 DOTA
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python中字典和JSON互转操作实例
2015/01/19 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
Python模块相关知识点小结
2020/03/09 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
django 模型字段设置默认值代码
2020/07/15 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
DataList 能否分页,请问如何实现?
2015/05/03 面试题
师范院校学生自荐信范文
2013/12/27 职场文书
普通员工辞职信
2014/01/17 职场文书
咖啡厅创业计划书范本
2014/01/22 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python