1.H5地理位置定位功能

首先判断用户浏览器是否支持该功能,目前大多数现代浏览器均支持,获取位置信息需用户授权同意

function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
}else{
alert("浏览器不支持地理定位。");
}
}

2.showPosition()获取用户经度纬度

function showPosition(position){
console.log(position);
var lat = position.coords.latitude; //纬度
var lag = position.coords.longitude; //经度
console.log('纬度:'+lat+',经度:'+lag);
}

3.执行函数getLocation(),如果调用成功即可显示经度纬度,简单吧!!!

4.补充showError(),这个函数是报错信息

showError(error){

  console.log(error.code)

}
function showError(error){
switch(error.code) {
case error.PERMISSION_DENIED:
alert("定位失败,用户拒绝请求地理定位");
break;
case error.POSITION_UNAVAILABLE:
alert("定位失败,位置信息是不可用");
break;
case error.TIMEOUT:
alert("定位失败,请求获取用户位置超时");
break;
case error.UNKNOWN_ERROR:
alert("定位失败,定位系统失效");
break;
}
}

接下来用百度和谷歌提供的接口,利用获取到的经纬度查看具体的地址信息

用到了jq的ajax封装,所以得引用jq,

百度的:

function showPosition(position){
//将我们获取到的经纬度保存到变量中
var latlon = position.coords.latitude+','+position.coords.longitude; //baidu接口
var url = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location="+latlon+"&output=json&pois=0"
$.ajax({
type: "GET",
dataType: "jsonp",
url: url,
beforeSend: function(){
$("#baidu").html('正在定位...');
},
success: function (data) {
if(data.status==0){
$("#baidu").html(data.result.formatted_address);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#baidu").html(latlon+"地址位置获取失败");
}
});
});

谷歌

谷歌同上,接口如下;

var  url='http://maps.google.cn/maps/api/geocode/json?latlng='+latlon+'&language=CN';

成功回调:

success: function (data) {
if(data.status=='OK'){
var results = data.results;
$.each(results,function(index,array){
if(index==0){
$("#google_geo").html(array['formatted_address']);
}
});
}
}

html5获取地理位置和定位的更多相关文章

  1. html5获取地理位置信息API

    html5获取地理位置信息API 在HTML5中,可以看下如何使用Geolocation API来获得用户的地理位置信息,如果该浏览器支持的话,且设备具有定位功能,就能够直接使用这组API来获取当前位 ...

  2. 【Demo】HTML5获取地理位置

    HTML5获取地理位置简单实例 实例1--获取地理位置的经纬度: <!DOCTYPE html> <html> <head>  <meta charset=& ...

  3. HTML5获取地理位置定位信息

    如何使用HTML5地理位置定位功能 定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确.首先我们要检测用 ...

  4. HTML5 获取地理位置信息

    HTML5增加的新功能,获取地理位置信息,如果浏览器支持且设备有定位功能,就能够直接使用这组API来获取当前信息位置.该Geolocation API可以应用于移动设备中的地理位置. Geolocat ...

  5. HTML5获取地理位置

    包含了以下功能:(1)通过IP地址获取城市地址(并不完全准确,存在代理IP或IP中转时定位与实际位置不一致的情况)(2)通过移动端浏览器及GPS定位位置坐标(3)根据位置坐标转换百度地图坐标(4)根据 ...

  6. HTML5获取地理位置信息

    <!DOCTYPE html> <html> <head> <title>Location</title> <meta charset ...

  7. HTML5获取地理位置信息并在Google Maps上显示

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  8. jQuery Mobile + HTML5 获取地理位置信息

      这个代码也非常简单,核心是HTML5中GeoLocation API,函数原型定义如下: void getCurrentPosition(in PositionCallback successCa ...

  9. Html5 Geolocation获取地理位置信息(转)

    Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置.基于此特性可以开发基于位置的服务应用.在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用. ...

随机推荐

  1. JS有关引用对象的拷贝问题

    JS中有关引用对象的拷贝问题 问题描述:在开发过程中,拷贝一个对象数组给另一个数组的时候,改变新数组中对象的属性值,原数组中的对象属性值也跟着改变了. 例如新定义一个数组arr1,里面有两个对象,然后 ...

  2. HighChart 不同颜色(柱状图)

    var chart = new Highcharts.Chart({ chart: { plotBackgroundColor: null, plotBorderWidth: null, backgr ...

  3. redis slot 槽点

    Redis 集群中内置了 16384 个哈希槽,当需要在 Redis 集群中放置一个 key-value 时,redis 先对 key 使用 crc16 算法算出一个结果,然后把结果对 16384 求 ...

  4. js 面试题一

    1.格式化数字,每三位加逗号 // 实现方式一 function formatNum(num){ var _num = num + ""; var result = "& ...

  5. iptables网络防火墙和SNAT原理实战

    网络防火墙 iptables/netfilter网络防火墙: (1) 充当网关 (2) 使用filter表的FORWARD链 注意的问题: (1) 请求-响应报文均会经由FORWARD链,要注意规则的 ...

  6. sql server 某一列求和

    sql server 某一列求和 SELECT 患者来源,设备类型,检查部位,设备名称,convert(char(10),STUDY_DATE,121) as 日期, count(distinct 就 ...

  7. SNMP OID列表

    zabbix的snmp监控还没开始讲,不过先给大家列一些snmp常用的一些OID,比如cpu.内存.硬盘什么的.先了解这些,在使用snmp监控服务器. 系统参数(1.3.6.1.2.1.1) OID ...

  8. 【16】大调 Leading Bass

    一小节2拍: (歌曲举例子) 菊花台(主).知足(主).青春修炼手册(副).记得(副).当你(副). 一小节1拍: (歌曲举例子) 菊花台(主).知足(主).青春修炼手册(副).记得(副).当你(副) ...

  9. 【Leetcode】【简单】【1. 两数之和】【JavaScript】

    题目描述 1. 两数之和 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能 ...

  10. adb连接MUMU模拟器

    参考:http://mumu.163.com/2017/12/19/25241_730476.html?type=notice 通过adb就可以像操作linux一样来看看模拟器的文件什么的,难道刷机就 ...