2

我正在尝试在引导程序上实现谷歌地图。

我已经按照谷歌自己的指南，在这里：https ://developers.google.com/maps/documentation/javascript/examples/map-simple

虽然这适用于独立页面，但当我添加 Bootstrap CSS 时，地图不会显示。我似乎找不到修复它的黑客。

HTML：

  <body>
    <div id="map-canvas"></div>
  </body>

脚本：

var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

CSS（通过引导）

  html, body, #map-canvas {
    margin: 0;
    padding: 0;
    height: 100%;
  }

在这里查看 jsFiddle：http: //jsfiddle.net/robmc/6BTjE/2/

有没有人遇到过这个？我一定错过了一个基本的解决方法，但没有多少论坛搜索有帮助。

谢谢

4

3 回答 3

4

我通过将高度更改为 px 解决了这个问题。希望能帮助到你

#map-canvas{
    /*height: 100%;*/
    height: 400px;
}
于 2015-01-14T11:09:22.990 回答
3

这似乎不是引导程序问题。对于您需要使用的小提琴document.ready，以及外部资源“ http://maps.googleapis.com/maps/api/js?v=3&sensor=false&extension=.js ”

http://jsfiddle.net/6BTjE/8/

此外，您的小提琴中没有参考引导程序。这是一个带有谷歌地图和引导程序的演示......

Bootstrap + Google Maps

document.ready你可以在 JavaScript中看到 jQuery ...

$(document).ready(function() {
 // code here
});
于 2013-05-30T20:03:48.463 回答
1

//我做了这个，它对我有用

$(document).ready(function(){
    var height=$( document ).height();
    $("#map").css("height", height );
});

$( document ).resize(function() {
    var height=$( document ).height();
    $("#map").css("height", height );
});
于 2018-01-13T08:03:00.993 回答