因朋友需要，之前看了下关于h5的手机定位，目前写了个demo在这里贴出来，感兴趣的朋友可以看一下。

目前的版本只是demo，仍有几个问题需要完善一下，问题如下：

1，如何将经纬度等数据发送到被定位人看不到的页面上。

2，如何绕过或或强制让打开链接的人允许使用定位（弹窗）。

3，目前或取经纬度后，要自行用谷歌地球去分析用户位置（通过卫星地图定位并显示），如何简化这一部分，让被定位者的经纬度自动生成地图图片并一起导入到其他页面（总之不能让被定位者察觉自己被定位的这一事实）。

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<title>demo..</title>

<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>

<style type="text/css">

.demo{width:560px; margin:60px auto 10px auto}

.geo{margin-top:20px}

.demo p{line-height:32px; font-size:16px}

.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/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location="+latlon+"&output=json&pois=0";

    $.ajax({

        type: "GET",

        dataType: "jsonp",

        url: url,

        beforeSend: function(){

            $("#baidu_geo").html('正在定位...');

        },

        success: function (json) {

            if(json.status==0){

                $("#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==0){

                    $("#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实现的手机定位的更多相关文章

  1. 基于 H5 WebGL 的 3D 室内定位及电子围栏

    前言 现代工业化的推进在极大加速现代化进程的同时也带来的相应的安全隐患,在传统的可视化监控领域,一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控,本系统采用 Hightopo 的 ...

  2. Android手机定位技术的发展

    基于以下三种方式的移动位置:1. 网络位置 :2. 基站定位. 3. GPS定位 1 网络位置 前提是连接到网络:Wifi.3G.2G 到达IP址  比如:彩虹版QQ,珊瑚虫版QQ,就有一个功能显示对 ...

  3. 【Android】第18章 位置服务和手机定位—本章示例主界面

    分类:C#.Android.VS2015: 创建日期:2016-03-04 一.简介 目前,基于位置的服务发展迅速,已涉及到商务.医疗.定位.追踪.敏感区域警告.工作和生活等各个方面.定位服务融合了G ...

  4. 基于H5的微信支付开发详解

    这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能.当然了,微信官网上的微信支付开发文档也讲解的很详细,并且有实现代码可 ...

  5. ****基于H5的微信支付开发详解[转]

    这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能.当然了,微信官网上的微信支付开发文档也讲解的很详细,并且有实现代码可 ...

  6. 基于H5的移动端开发，window.location.href在IOS系统无法触发问题

    最近负责公司的微信公众号开发项目,基于H5进行开发,某些页面window.location.href在Android机上能正常运行而IOS系统上无法运行,导致无法重定向到指定页面,查了好久终于找到方法 ...

  7. 手机自带的显示基站命令（android手机定位，iphone基站定位）

    手机自带的显示基站命令(安卓手机定位,苹果手机基站定位) 分类: 通信和网络2012-02-07 17:48 1734人阅读 评论(0) 收藏 举报 手机htciphone中兴三星网络 安卓手机自带快 ...

  8. iOS修改手机定位(非越狱任意位置)

    利用开发者的一些调试功能,我们可以修改非越狱的苹果手机定位,模拟任意位置. 经测试,此方法仅限开发者调试使用,并不能长时间修改手机定位. 1. 首先需要了解一些坐标系的知识 iOS,原生坐标系为 WG ...

  9. 基于h5的图片无刷新上传(uploadifive)

    基于h5的图片无刷新上传(uploadifive) uploadifive简介 了解uploadify之前,首先了解来一下什么是uploadify,uploadfy官网,uploadify和uploa ...

随机推荐

  1. 【转】开发者分享如何创造一款优秀的iOS游戏——2013-08-25 17

    http://game.dapps.net/gamedev/experience/889.html 创造出<Temple Run>的夫妻团队在高峰时期每天能够获得"好几万&quo ...

  2. List IEnumerable

    //按部门汇总            IEnumerable<WeekReportWithDepartmentInfo> report = summary            .Grou ...

  3. 当前位置: 银光首页 > WPF > WPF学习教程 > WPF： ShowDialog() 切换到其他应用窗口后，再切换回来无法让子窗口总在最上方

    转自http://www.silverlightchina.net/html/study/WPF/2012/0723/17608.html

  4. XCode模拟器屏幕显示内容非常慢

    今天遇到了一个问题,就是XCode模拟器屏幕显示的非常慢,但是点击一下模拟器,内容就会马上显示出来,最后查找出问题是自己不注意把刷新UI界面的代码放到了异步线程中去执行了,刷新UI界面的代码放到主线程 ...

  5. su: cannot set user id: Resource temporarily unavailable

    今天R&D所在主机出现su: cannot set user id: Resource temporarily unavailable资源不可用报错,直接通过其他机器ssh huyuh@xxx ...

  6. Eclipse下使用Hadoop单机模式调试MapReduce程序

    在单机模式下Hadoop不会使用HDFS,也不会开启任何Hadoop守护进程,所有程序将在一个JVM上运行并且最多只允许拥有一个reducer 在Eclipse中新创建一个hadoop-test的Ja ...

  7. Android 使用定时器在指定日期及时间执行任务

    public class MainActivity extends Activity { private Handler handler = new Handler(){ @Override publ ...

  8. 有理数类 Java BigInteger实现

    import java.math.BigInteger; public class Rational extends Number implements Comparable { private Bi ...

  9. 第17条：实现description方法

    自定义类需要自己覆写description方法,否则打印信息时就会调用NSObject类所实现的默认方法.(如果不覆写,只会输出类名和对象的内存地址的信息,这只有在判断两个指针是否指向同一对象时才有用 ...

  10. Ubuntu_14.04安装docker

    Ubuntu_14.04安装docker $ sudo apt-get update $ sudo apt-get install apt-transport-https ca-certificate ...