基于h5 ajax实现手机定位(demo)
因朋友需要，之前看了下关于h5的手机定位，目前写了个demo在这里贴出来，感兴趣的朋友可以看一下。
目前的版本只是demo，仍有几个问题需要完善一下，问题如下：
1，如何将经纬度等数据发送到被定位人看不到的页面上。
2，如何绕过或或强制让打开链接的人允许使用定位（弹窗）。
3，目前或取经纬度后，要自行用谷歌地球去分析用户位置（通过卫星地图定位并显示），如何简化这一部分，让被定位者的经纬度自动生成地图图片并一起导入到其他页面（总之不能让被定位者察觉自己被定位的这一事实）。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-">
<meta name="viewport" content="width=device-width, initial-scale=, maximum-scale=">
<title>demo..</title>
<script type="text/javascript" src="http://libs.useso.com/js/jquery/../jquery.min.js"></script>
<style type="text/css">
.demo{width:px; margin:px auto px auto}
.geo{margin-top:px}
.demo p{line-height:px; font-size:px}
.demo p span,#baidu_geo,#google_geo{font-weight:bold}
</style>
</head>
<body>
<div id="main">
<div class="demo">
<p>地理坐标：<span id="latlon"></span></p>
<div class="geo">
<p>百度地图定位位置：</p>
<p id="baidu_geo"></p>
</div>
<div class="geo">
<p>GOOGLE地图定位位置：</p>
<p id="google_geo"></p>
</div>
</div>
</div>
<script>
function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
}else{
alert("浏览器不支持地理定位。");
}
}
function showPosition(position){
$("#latlon").html("<br />纬度:"+position.coords.latitude +'<br />经度:'+ position.coords.longitude);
var latlon = position.coords.latitude+','+position.coords.longitude;
//baidu
var url = "http://api.map.baidu.com/geocoder/v/?ak=Cbdaebdbbbabceb&callback=renderReverse&location="+latlon+"&output=json&pois=";
$.ajax({
type: "GET",
dataType: "jsonp",
url: url,
beforeSend: function(){
$("#baidu_geo").html('正在定位...');
},
success: function (json) {
if(json.status==){
$("#baidu_geo").html(json.result.formatted_address);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#baidu_geo").html(latlon+"地址位置获取失败");
}
});
//google
var url = 'http://maps.google.cn/maps/api/geocode/json?latlng='+latlon+'&language=CN';
$.ajax({
type: "GET",
url: url,
beforeSend: function(){
$("#google_geo").html('正在定位...');
},
success: function (json) {
if(json.status=='OK'){
var results = json.results;
$.each(results,function(index,array){
if(index==){
$("#google_geo").html(array['formatted_address']);
}
});
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#google_geo").html(latlon+"地址位置获取失败");
}
});
}
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;
}
}
getLocation();
</script>
</body>
</html>
以上代码就是实现h5和ajax手机定位代码，后续还会持续更新完善，请大家持续关注我们网站。
相关推荐
-
使用ajax和history.pushState无刷新改变页面URL示例
表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器前进和后退. 是什么有这么强大的功能呢? HTML5里引用了新的API,history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别 传统的ajax有如下的问题: 1.可以无刷新
-
基于Jquery.history解决ajax的前进后退问题
以下内容是关于Jquery.history解决ajax的前进后退问题,具体详情请看下文. 本文的前提是基于后台的,所以这里不会考虑seo的问题.同时,基于后台的管理系统,也不需要被收藏,所以也不会考虑刷新的这种类似直接敲网址的情况!!! 这里使用的是html5中的history.state 来解决. 网上已经有了js的开源解决方案pushState.详见pjax 但是这个方案不适合我的项目(后台项目),尤其是主要的方法有点不够用. 我使用的是 jquery.history.js 可以参考这个
-
基于h5的history改善ajax列表请求体验
信息比较丰富的网站通常会以分页显示,在点"下一页"时,很多网站都采用了动态请求的方式,避免页面刷新.虽然大家都是ajax,但是从一些小的细节还是 可以区分优劣.一个小的细节是能否支持浏览器"后退"和"前进"键.本文讨论两种方法,让浏览器可以后退和前进,或者说让ajax就像重定向到新页面一样 拥有能够返回到上一页或者前进到下一页. 数据实现分页显示,最简单的做法是在网址后面加多个page的当数,点"下一页"时,让网页重定向到pa
-
基于h5 ajax实现手机定位(demo)
因朋友需要,之前看了下关于h5的手机定位,目前写了个demo在这里贴出来,感兴趣的朋友可以看一下. 目前的版本只是demo,仍有几个问题需要完善一下,问题如下: 1,如何将经纬度等数据发送到被定位人看不到的页面上. 2,如何绕过或或强制让打开链接的人允许使用定位(弹窗). 3,目前或取经纬度后,要自行用谷歌地球去分析用户位置(通过卫星地图定位并显示),如何简化这一部分,让被定位者的经纬度自动生成地图图片并一起导入到其他页面(总之不能让被定位者察觉自己被定位的这一事实). <!DOCTYPE HT
-
基于JavaScript实现根据手机定位获取当前具体位置（X省X市X县X街道X号）
废话不多说了,直接给大家贴js代码了.具体代码如下所示: function Location(){}; Location.prototype.getLocation = function(callback){ var options = { enableHighAccuracy: true, maximumAge: 1000 }; this.callback = Object.prototype.toString.call(callback) =="[object Function]"
-
基于原生ajax与封装的ajax使用方法(详解)
当我们不会写后端接口来测试ajax时,我们可以使用node环境来模拟一个后端接口. 1.模拟后端接口可参考网站整站开发小例子,在打开命令窗口并转到所在项目文件夹下在命令行中输入npm install express --save,安装express中间件. 2.把当中的app.js的内容换成 var express=require('express'); //var path=require('path'); var app=express(); //app.set('view',path.jo
-
JavaScript基础之AJAX简单的小demo
AJAX AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. function prepareForms() { for(var j=0 ; j<document.forms.length ; j++){ var this_forms = document.forms[j]; rese
-
php实现基于微信公众平台开发SDK(demo)扩展的方法
本文实例讲述了php实现基于微信公众平台开发SDK(demo)扩展的方法.分享给大家供大家参考.具体分析如下: 该扩展基于官方的微信公众平台SDK,这里只做了简单地封装,实现了一些基本的功能(如天气查询,翻译,自动聊天机器人,自定义菜单接口)仅供学习之用.代码如下: 复制代码 代码如下: define("TOKEN", "xingans"); $wechatObj = new wechatCallbackapiTest(); $wechatObj->respo
-
基于Jquery Ajax type的4种类型(详解)
Ajax type这个里面填什么呢?通常大家都会说get和post.那么还有2个是什么呢? $.ajax({ url: 'http://www.cnblogs.com/youku/', type: '', data: {} }); (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET".注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持. 此处是网上找
-
基于jQuery Ajax实现上传文件
本文实例为大家分享了基于jQuery Ajax实现上传文件的关键代码,供大家参考,具体内容如下 JS代码: //保存 function btnAdd() { var formData = new FormData($("#frm")[0]); $.ajax({ url: "/Admin/ContentManage/SaveEdit", type: "POST", data: formData, contentType: false, //必须fa
-
浅析Android手机卫士手机定位的原理
推荐阅读: 浅析Android手机卫士sim卡绑定 深入浅析Android手机卫士保存密码时进行md5加密 详解Android 手机卫士设置向导页面 浅析Android手机卫士关闭自动更新 浅析Android手机卫士自定义控件的属性 浅析Android手机卫士读取联系人 浅析Android手机卫士接收短信指令执行相应操作 手机定位的三种方式:网络定位,基站定位,GPS定位 网络定位,手机连上wifi 2g 3g的时候,手机会有一个ip,误差很大 基站定位,精确度与基站的多少有关,几十米到几公里的
-
基于界面适配华为手机的虚拟按键的解决方法
一.概述 在项目中,测试发现在一些华为手机的屏幕适配上出现了问题,主要是因为华为Mate等一些系列的手机有一个虚拟按键的设计.当这些虚拟按键由用户手势滑出,或默认显示的话,就会遮挡我们本身的应用布局.比如欢迎界面过后是四个Fragment,那么底部的四个tab就会被虚拟的导航栏遮住,非常难看. 当然,欢迎页的图片适配也同样会出现问题. Google后得出第一个问题的解决方案.第二个图片的问题则用自己摸索的方式解决,当然也非常简单. 二.布局由于虚拟按键导致导航栏顶上去的解决方法 在我们的项目中加
-
Android实现手机定位的案例代码
Android手机定位案例代码 代码如下: package com.xuliugen.gpsdemo; import com.itheima.gpsdemo.R; import android.app.Activity; import android.location.Criteria; import android.location.Location; import android.location.LocationListener; import android.location.Locat