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

结合百度地图在定位地点使用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.οnclick=function(){//定位
            var geo=new BMap.Geolocation();
            geo.getCurrentPosition(function(result){
                console.log(result);
                point=result.point;
                registerBtn.disabled=false;//定位完即可注册
            });
        };
        registerBtn.οnclick=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("

"+user.attributes.username+"

"
)
; 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(); })
()

你可能感兴趣的:(WEB前端JavaScript)