因朋友需要，之前看了下关于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. MVC - Ajax

    Ajax表单 使用Ajax.BeginForm方法即可开启Ajax表单 Ajax.BeginForm() 参数1:Action名参数2:使用AjaxOptions实例设定异步请求的属性 new Aja ...

  2. phpcms 源码分析二：

    这次是逆雪寒的common.inc.php第二部分: <?php /* 明天放假了．今天在写点罗．放假没空写了．要陪老婆,大家看了有什么不明白的．可以跟帖问．我懂的我会回答．谢谢 [/php] ...

  3. javascript笔记08：javascript的if...else语句

    案例代码如下: <!DOCTYPE html> <html> <body> <p>点击这个按钮,获得基于时间的问候.</p> <but ...

  4. c#中[Flags] 枚举类型定义问题_百度知道

    [Flags]的微软解释是“指示可以将枚举作为位域(即一组标志)处理.”其实就是在编写枚举类型时,上面附上Flags特性后,用该枚举变量是既可以象整数一样进行按位的“|”或者按位的“&”操作了 ...

  5. iOS 并行编程：GCD Dispatch Sources

    1 简介 dispatch source是一种用于处理事件的数据类型,这些被处理的事件为操作系统中的底层级别.Grand Central Dispatch(GCD)支持如下的dispatch sour ...

  6. 正则表达式 和 junit测试

    需要知道一些常规的正则表达式语句,然后可以仿照规则写出一下正则表达式语句.然后是关于junit测试. 知道了一个之前看过的文档,然后有功夫就看一下那个文档就可以,或者后面找时间搜索一下. 正则表达式是 ...

  7. Working with BeforeProperties and AfterProperties on SPItemEventReceiver

    As many of you know, event receivers are a great way to hook into various SharePoint events.  These ...

  8. SqlMgmt sql2008报错

    标题: Microsoft SQL Server Management Studio------------------------------ 无法显示请求的对话框. --------------- ...

  9. initMethod 和 afterPropertiesSet 以及 AwareMethod方法的执行时机

    在spring开发中,我们定义bean 经常会需要用到beanFactory对象,这就需要实现BeanFactoryAware这种类型的接口,它有一个setBeanFactory方法   在xml中配 ...

  10. VS2012 直接浏览网页时报错

    VS2012 直接浏览网页时报错  "托管管道模式不能为集成" 只要在configuration文件里面添加   <system.webServer>     < ...