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>
  • 相关阅读:
    Yield Usage Understanding
    Deadclock on calling async methond
    How to generate file name according to datetime in bat command
    Run Unit API Testing Which Was Distributed To Multiple Test Agents
    druid的关键参数+数据库连接池运行原理
    修改idea打开新窗口的默认配置
    spring boot -thymeleaf-url
    @pathvariable和@RequestParam的区别
    spring boot -thymeleaf-域对象操作
    spring boot -thymeleaf-遍历list和map
  • 原文地址:https://www.cnblogs.com/wangjiayi/p/4828404.html
Copyright © 2011-2022 走看看