javascript - 谷歌地图 Bootstrap 3

Question

我试图在我的谷歌地图 Canvas 下方放置两个按钮(其中一个是下拉按钮)。如果没有按钮标记，Google map 可以正常加载。当我添加按钮代码时， map 消失。 map 元素和按钮都位于相同的容器和列中，但位于不同的行上。

<div class="container-fluid pushdown">

  <div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-8"><div class="map" id="map"></div></div>
    <div class="col-md-2"></div>
  </div>

  <div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-8">
      <div id="controls">
        <button class="btn btn-default btn-lg dropdown-toggle location"type="button" data-toggle="dropdown"  aria-haspopup="true" aria-expanded="false">
          Select<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><input type="checkbox" class="Check" name="traders[]" value="1"/><label class="CheckText">Trader1</label></li>
          <li><input type="checkbox" class="traderCheck" name="traders[]" /><label class="traderCheckText">Trader2</label></li>
        </ul>
        <button onclick="location.href = 'search.html';" type="button" class="btn btn-default btn-lg" id="searchButton">Search <span class="glyphicon glyphicon-search"></span></button>
      </div>
    </div>
    <div class="col-md-2"></div>
  </div>

</div>

还有 JS:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 16,
    disableDefaultUI: true
  });

  var marker = new google.maps.Marker({
    position: {lat: -34.397, lng: 150.644},
    draggable:true
  });

  // Try HTML5 geolocation.
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      map.setCenter(pos);
      marker.setPosition(pos);
      marker.setMap(map);
    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter());
  }
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(browserHasGeolocation ?
    'Error: The Geolocation service failed.' :
    'Error: Your browser doesn\'t support geolocation.');
}

map 元素 CSS:

.map {
  width: 100%;
  height: 500px;
  background-color: blue;
}

另外，我尝试只使用第二行的 3 列(没有按钮元素)，然后 map 消失了。这意味着我的问题出在 Bootstrap 上。

Answer 1

试试这个方法。

function initMap() {
   var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 16,
      disableDefaultUI: true
   });

   var marker = new google.maps.Marker({
      position: {lat: -34.397, lng: 150.644},
      draggable:true
   });

   // Try HTML5 geolocation.
   if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
         var pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
          };

          map.setCenter(pos);
          marker.setPosition(pos);
          marker.setMap(map);
      }, function() {
          handleLocationError(true, infoWindow, map.getCenter());
      });
   } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
   }
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
   infoWindow.setPosition(pos);
   infoWindow.setContent(browserHasGeolocation ?
    'Error: The Geolocation service failed.' :
    'Error: Your browser doesn\'t support geolocation.');
}
 
    </script>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCrwOEvG-QIFrYPBCwRVTvXvSuzcnz38Xs&signed_in=true&callback=initMap"
        async defer>
    </script>   

.map{
   width: 100%;
   height: 500px;
   background-color: blue;
}   

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container-fluid pushdown">
   <div class="row">
      <div class="col-md-2"></div>
      <div class="col-md-8"><div class="map" id="map"></div></div>
      <div class="col-md-2"></div>
   </div>

   <div class="row">
      <div class="col-md-2"></div>
      <div class="col-md-8">
         <div id="controls">

            <button class="btn btn-default btn-lg dropdown-toggle location"type="button" data-toggle="dropdown"  aria-haspopup="true" aria-expanded="false">
  Select<span class="caret"></span>
            </button>

            <ul class="dropdown-menu">
               <li>
                  <input type="checkbox" class="Check" name="traders[]" value="1"/>
                  <label class="CheckText">Trader1</label></li>

               <li>
                  <input type="checkbox" class="traderCheck" name="traders[]" />
                  <label class="traderCheckText">Trader2</label></li>
            </ul>

            <button onclick="location.href = 'search.html';" type="button" class="btn btn-default btn-lg" id="searchButton">Search <span class="glyphicon glyphicon-search"></span></button>

      </div>
</div>
<div class="col-md-2"></div>