因朋友需要，之前看了下关于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. 【转】以XML文件方式保存用户数据——2013-08-25 22

    正在做项目中有很多游戏数据要保存,常见的玩家数据这些比较简单的可以用CCUserDefault.它是cocos2d-x用来存取基本数据类型用的.保存为XML文件格式. 主要方法:(和java的map很 ...

  2. 关于android应用--内存的优化

    以下内容为转载自网上,然后自己加工贴合到一块的: 原文地址:http://www.cnblogs.com/frydsh/archive/2012/12/09/2810601.html http://w ...

  3. flex学习网站地址

    http://hacker47.iteye.com/blog/213887 http://www.cuplayer.com/player/PlayerCode/Flex/ http://bbs.9ri ...

  4. iOS开发篇-申请开发者账号流程

    1.注册一个苹果的apple id申请apple id的地址: https://appleid.apple.com/account 2.如申请公司账号,请使用以下链接免费获取邓白氏号码,以下的申请表格 ...

  5. 利用Qt制作一个helloworld

    使用QT创建第一个 工程: 1.打开应用程序: 2.单击画面中间偏上的 New Project按钮.[要学习使用啊~,传说它的跨平台行很好,QQ就是用它编辑的.] 3.直接点击右下角的选择 按钮. 4 ...

  6. javabean对象要实现的接口们和要重写的方法们

    在使用list集合的时候,什么也不用. 原因:list允许存储重复的元素. 在使用set集合的时候,要重写,equals()方法 和 hashCode() 方法. 愿意:set集合 不允许存放相同的元 ...

  7. 使用nexus创建maven私有仓库

    nexus安装 nexus下载 wget https://sonatype-download.global.ssl.fastly.net/nexus/oss/nexus-2.11.1-01-bundl ...

  8. ElastciSearch常用APi

    列出所有的索引: GET /_cat/indices?v 删除索引 DELETE /customer?pretty

  9. mssql死锁问题

    在网上查看了很多死锁与阻塞的资料,为什么会出现死锁或者阻塞? 阻塞在大数据量的数据库中经常出现,在我现在的其中一个项目出现的频率很高,根据网上查到死锁跟阻塞的资料,当时分析出来,主要是多台设备同时调用 ...

  10. web services 接口测试方法

    public class Test { public static void main(String[] args) { JaxWsProxyFactoryBean factory = new Jax ...