简单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 相关文章推荐
HTML5如何适配 iPhone IOS 底部黑条
Mar 09 HTML / CSS
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
Aug 03 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
Jan 07 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
Aug 13 HTML / CSS
AmazeUI导航的示例代码
Aug 14 HTML / CSS
css实现文章分割线样式的多种方法总结
Apr 21 HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
Apr 24 HTML / CSS
css height属性中的calc方法详解
Jun 03 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
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
php自动加载机制的深入分析
2013/06/08 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
php加密解密实用类分享
2014/01/07 PHP
PHP curl 获取响应的状态码的方法
2014/01/13 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
vue实现虚拟列表功能的代码
2020/07/28 Javascript
python聊天程序实例代码分享
2013/11/18 Python
wxpython学习笔记(推荐查看)
2014/06/09 Python
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
python使用tornado实现简单爬虫
2018/07/28 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
演讲稿怎么写才完美
2014/01/02 职场文书
人事助理自荐信
2014/02/02 职场文书
初一学生期末评语
2014/04/24 职场文书
法定代表人证明书
2014/11/28 职场文书
工作失误检讨书范文
2015/01/26 职场文书
房租涨价通知
2015/04/23 职场文书
电影地道战观后感
2015/06/04 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS