Question

我在gostrap行中有谷歌地图..

     <style>
     #map {
     height: 100%;
     width: 100%
     }
    </style>

<div class="container">
            <div class="row">
                <div class="col-sm-6">
...some form fields             
                </div>
                <div class="col-sm-6">
                    <div id="map"></div>
                </div>
            <div>
</div>

这看起来像预期的那样..

Screenshot

如果我尝试在较小的屏幕上加载，则只显示地图的前几个像素。如果我将图像放在map div中，那么这可以按预期工作（可以看到整个图像）。

如果我手动调整div的大小，我会得到一个带有半个地图和半个灰色屏幕的框。如何在响应式引导程序中处理地图？

Answer 1

在这里，您可以使用示例解决方案http://jsfiddle.net/4mtyu/3013/

/*
 * declare map as a global variable
 */
var map;

/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function () {

  /*
   * create map
   */
  map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(33.808678, -117.918921),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  /*
   * create infowindow (which will be used by markers)
   */
  var infoWindow = new google.maps.InfoWindow();

  /*
   * marker creater function (acts as a closure for html parameter)
   */
  function createMarker(options, html) {
    var marker = new google.maps.Marker(options);
    if (html) {
      google.maps.event.addListener(marker, "click", function () {
        infoWindow.setContent(html);
        infoWindow.open(options.map, this);
      });
    }
    return marker;
  }

  /*
   * add markers to map
   */
  var marker0 = createMarker({
    position: new google.maps.LatLng(33.808678, -117.918921),
    map: map,
    icon: "http://1.bp.blogspot.com/_GZzKwf6g1o8/S6xwK6CSghI/AAAAAAAAA98/_iA3r4Ehclk/s1600/marker-green.png"
  }, "<h1>Marker 0</h1><p>This is the home marker.</p>");

  var marker1 = createMarker({
    position: new google.maps.LatLng(33.818038, -117.928492),
    map: map
  }, "<h1>Marker 1</h1><p>This is marker 1</p>");

  var marker2 = createMarker({
    position: new google.maps.LatLng(33.803333, -117.915278),
    map: map
  }, "<h1>Marker 2</h1><p>This is marker 2</p>");
});

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(new google.maps.LatLng(33.808678, -117.918921));
});

body {
  margin: 0;
  padding: 0;
  font: 12px sans-serif;
}
h1, p {
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12 col-md-offset-1 col-md-10 col-lg-offset-2 col-lg-8">
      <div id="map_div" style="height: 400px;"></div>
    </div>
  </div>
</div>

我已经重新调整了浏览器的大小

google.maps.event.addDomListener(window, 'resize', function() {
   map.setCenter(new google.maps.LatLng(33.808678, -117.918921));
});

希望这会对你有所帮助。

如何防止谷歌地图在bootstrap中消失

1 个答案: