在 Google 地图 API 上显示 Bootstrap 登录模式

Question

我正在尝试创建一个将加载 Google 地图 API 作为背景的网页，然后检查用户是否已登录。如果他们已登录，该页面将从数据库加载数据并更新地图（没有编程那么多，只是一个占位符警报）。如果用户未登录，则 Bootstrap 模式应显示登录表单。但是，我无法让模态显示在屏幕上。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Smart Force Tracker</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">

    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map-canvas');
        var mapOptions = {
          center: new google.maps.LatLng(35.40, -97.5),
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.TERRAIN,
          panControl: false,
          zoomControl: false,
          streetViewControl: false
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
      }

    function setCookie(cname,cvalue,exhours) {
       var d = new Date();
       d.setTime(d.getTime() + (exhours*60*60*1000));
       var expires = "expires=" + d.toGMTString();
       document.cookie = cname+"="+cvalue+"; "+expires;
    }

    function getCookie(cname) {
       var name = cname + "=";
       var ca = document.cookie.split(';');
       for(var i=0; i<ca.length; i++) {
           var c = ca[i];
           while (c.charAt(0)==' ') c = c.substring(1);
           if (c.indexOf(name) == 0) {
               return c.substring(name.length, c.length);
           }
       }
       return "";
    }

    function checkLogin() {

       initialize();

       var isLogin=getCookie("isLogin");
       if (isLogin != "") {
           alert("Welcome again " + isLogin);
       } else {
          $("#loginModal").modal("show");
       }
    }
    </script>   
  </head>
  <body onload="checkLogin()">

    <div class="container">
       <div id="map-canvas">

       </div>
    </div>

    <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
       <div class="modal-dialog modal-sm">
          <div class="model-content">
             <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">Login</h4>
             </div>
             <div class="modal-body">
                <form class="form-signin">
                   <label for="inputEmail" class="sr-only">Email Address</label>
                   <input type="email" id="inputEmail" class="form-control" placeholder="Email Address" required autofocus>
                   <label for="inputPassword" class="sr-only">Password</label>
                   <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
                   <button class="btn btn-primary btn-block" type="submit">Sign In</button>
                </form>
             </div>
             <div class="modal-footer">
                <button class="btn btn-default btn-block" type="button">Register</button>
             </div>
          </div>
       </div>
    </div>

    <div class="modal-backdrop fade in"></div>

  </body>
</html>

main.css

#map-canvas 
{
height: 100%;
width: 100%;
left: 0;
position: absolute;
top: 0;
z-index:-1;
}

如有任何帮助，我们将不胜感激。

Answer 1

我稍微编辑了你的代码。我更改了你#map-canvas 上的 z-index。我还重新排列了你的 javascript。

模式现在显示在地图上。

这就是你想要的吗？如果不是，请在评论中告诉我。

Javascript:

function initialize() {
    var mapCanvas = document.getElementById('map-canvas');
    var mapOptions = {
      center: new google.maps.LatLng(35.40, -97.5),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.TERRAIN,
      panControl: false,
      zoomControl: false,
      streetViewControl: false
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);

    checkLogin();
  }

function setCookie(cname,cvalue,exhours) {
   var d = new Date();
   d.setTime(d.getTime() + (exhours*60*60*1000));
   var expires = "expires=" + d.toGMTString();
   document.cookie = cname+"="+cvalue+"; "+expires;
}

function getCookie(cname) {
   var name = cname + "=";
   var ca = document.cookie.split(';');
   for(var i=0; i<ca.length; i++) {
       var c = ca[i];
       while (c.charAt(0)==' ') c = c.substring(1);
       if (c.indexOf(name) == 0) {
           return c.substring(name.length, c.length);
       }
   }
   return "";
}

function checkLogin() {

   var isLogin=getCookie("isLogin");
   if (isLogin != "") {
       alert("Welcome again " + isLogin);
   } else {
      $("#loginModal").modal("show");
   }
}

$(document).ready(function(){
    initialize();    
});

CSS:

#map-canvas 
{
height: 100%;
width: 100%;
left: 0;
position: absolute;
top: 0;
z-index:0;
}

工作Fiddle: http://jsfiddle.net/cwytqLfm/

Answer 2

查看控制台内部可能会有帮助：

错误：Bootstrap 的 JavaScript 需要 jQuery

你必须加载 jquery-2.1.3.min.js before bootstrap.min.js

在 Google 地图 API 上显示 Bootstrap 登录模式

Show Bootstrap login modal over Google Maps API

javascript

jquery

twitter-bootstrap

google-maps

bootstrap-modal