小白入门---BMOB后端云的使用

最新推荐文章于 2021-07-01 17:20:02 发布

Richer_wangx

最新推荐文章于 2021-07-01 17:20:02 发布

阅读量1.6k

点赞数

分类专栏： WEB前端JavaScript

本文链接：https://blog.csdn.net/Miss_wangdapao/article/details/76858816

版权

WEB前端JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

结合百度地图在定位地点使用BMOB注册和登录用户

1、HTML部分代码

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">         
            #map{width: 100%;height: 300px;}
        </style>
        <script src="http://api.map.baidu.com/api?v=2.0&ak=GZcOmK5dMsymaX7DSo1jqUcSyMS3W0PU" type="text/javascript" charset="utf-8">
            //1.引入百度地图SDK
        </script>
    </head>
    <body>
        <div class="registerContainer">
            <input type="text" placeholder="账号" />
            <br />
            <input type="password" placeholder="密码" />
            <br />
            <button class="locationBtn">定位</button>
            <button class="registerBtn" disabled="disabled">注册</button>
        </div>

        <div id="map"></div>
        <script src="js/bmob-min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/APP.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

2、JS部分代码

(function(){
    var map=new BMap.Map("map");
    map.centerAndZoom("西安",12);
    //初始化BMOB
    Bmob.initialize("e85f3ead5ad48136b8d9b0bd5470c0cc", "2a670c6cf3b4bd9d8f2a849c7a32976c");//使用自己的应用秘钥
    function register(){//注册
        var locationBtn=document.querySelector(".locationBtn");
        var registerBtn=document.querySelector(".registerBtn");
        var userNameInput=document.querySelector("input[type=text]");
        var psdInput=document.querySelector("input[type=password]");
        var point=null;
        locationBtn.onclick=function(){//定位
            var geo=new BMap.Geolocation();
            geo.getCurrentPosition(function(result){
                console.log(result);
                point=result.point;
                registerBtn.disabled=false;//定位完即可注册
            });
        };
        registerBtn.onclick=function(){//注册
            var user = new Bmob.User();//使用bmob注册用户的方法
            user.set("username", userNameInput.value);
            user.set("password", psdInput.value);
            console.log(psdInput.value);
            user.set("lat", point.lat);
            user.set("lng", point.lng);
            user.signUp(null, {
              success: function(user) {
                // Hooray! Let them use the app now.
              },
              error: function(user, error) {
                // Show the error message somewhere and let the user try again.
                alert("Error: " + error.code + " " + error.message);
              }
            });         
        }
    }
    function loadUsers(){
        var query = new Bmob.Query(Bmob.User);//使用bmob加载数据的方法
        query.find({
          success: function(result) {
            console.log(result);
            result.forEach(function(user){
//              console.log(user.attributes);
//              console.log(user.attributes.username);
//              console.log(user.attributes.lat);
//              console.log(user.attributes.lng);
                var marker=new BMap.Marker(new BMap.Point(user.attributes.lng,user.attributes.lat));
                map.addOverlay(marker);
                marker.enableDragging();
                marker.addEventListener("click",function(){
                    var infoWindow=new BMap.InfoWindow("<p style='padding: 10px'>"+user.attributes.username+"</p>");
                    marker.openInfoWindow(infoWindow);
                });
            });
          }

        });
        function addScore() {//使用bmob获取得分的方法
            var GameScore = Bmob.Object.extend("GameScore");
            var gameScore = new GameScore();
            gameScore.set("score", 137);
            gameScore.set("userID", Bmob.User.current().id);


            gameScore.save(null, {
                success: function(gameScore) {
                },
                error: function(gameScore, error) {
                    alert('添加数据失败，返回错误信息：' + error.description);
                }
            });
        }
        addScore();
        function login() {//使用bmob登录的方法
            Bmob.User.logIn("6455", "11111", {
                success: function(user) {
                    // Do stuff after successful login.
                },
                error: function(user, error) {
                    // The login failed. Check error to see why.
                }
            });
        }
        login();

    }

    function init(){
        register();
        loadUsers();
    }
    init();
})()

Richer_wangx

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
小白入门---BMOB后端云的使用

结合百度地图在定位地点使用BMOB注册和登录用户 1、HTML部分代码<html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #map{width: 100%;height: 300px;}
复制链接

扫一扫