因朋友需要，之前看了下关于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. mysql优化之连接优化

    Posted by Money Talks on 2012/02/23 | 第一篇 序章第二篇 连接优化第三篇 索引优化第四篇 查询优化第五篇 到实战中去 连接优化 连接优化主要指客户端连接数据库以及 ...

  2. 进程控制之wait3和wait4函数

    大多数UNIX系统实现提供了另外两个函数wait3和wait4.它们提供的功能比POSIX.1函数wait.waitpid和waitid所提供的功能要多一个,这与附加参数rusage有关.该参数要求内 ...

  3. 标准I/O库之打开和关闭流

    下列三个函数打开一个标准I/O流. #include <stdio.h> FILE *fopen( const char *restrict pathname, const char *r ...

  4. Android5.0之TextInputLayout、FloatingActionButton的使用

    TextInputLayout和FloatingActionButton都属于MD风格的控件,比起普通的EditText和Button.ImageButton,TextInputLayout和Floa ...

  5. javascript进击（四）HTML DOM

    HTML DOM (文档对象模型) 什么是DOM? DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准. W3C 文档对象模型 (DOM) 是中立于平台和语 ...

  6. JQuery对象与DOM对象分析

    一.定义: DOM对象(文档对象模型):暂时这么理解:通过JavaScript获取的HTML元素,称为DOM对象.如:var domID=document.getElementById("i ...

  7. ThinkPHP函数详解：cookie方法

    cookie函数也是一个多元化操作函数,完成cookie的设置.获取和删除操作. Cookie 用于Cookie 设置.获取.删除操作 用法cookie($name, $value='', $opti ...

  8. Dynamic CRM：解决在创建业务流程时无法选择部分实体

    在使用Dynamic CRM 业务流程的时候,会现在无法在步骤创建里选择我们想要的实体(如订单产品) 解决方法: 在SQL Server 中CRM数据库中找到[MetadataSchema].[Ent ...

  9. SQL Server delete、truncate、drop

    在T-SQL中这三个命令符,相信很多朋友都不会陌生的,我自己在工作也会常常使用到它们,虽然我们清除的知道用这三个命令符可以达到怎样的预期效果. 但是却很少深入的去了解它们,知道它们有什么区别,又各有什 ...

  10. MVC小系列（十七）【自定义验证规则给下拉框】

    因为下拉框不支持验证,所以写一个attribute特性,让它继承ValidationAttributemvc的特性验证,很直接,无论是数据安全特性上还是页面表现上都不错,它的运行机制: 前台表单验证规 ...