zoukankan      html  css  js  c++  java
  • 基于h5+ajax实现的手机定位

    因朋友需要,之前看了下关于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>
  • 相关阅读:
    调试STM32/8 程序一些浅显又不易发现的问题
    MS5611 转换时间和精度的关系
    matlab 实用快捷键
    计算机中十六进制数对应的内存大小速记
    matlab 基本变量和函数
    自定义Button形状(圆形、椭圆)
    Android:自定义标题栏
    Python-21-socket编程
    Python-20-异常处理
    Python-19-元类
  • 原文地址:https://www.cnblogs.com/wangjiayi/p/4828404.html
Copyright © 2011-2022 走看看