Bootstrap 3.0 和 Google Maps JavaScript API V3 样式设计

Question

我正在尝试将Google Maps JavaScript API v3实现到一个使用Bootstrap 3.0“carousel”基础主题的网站中。

问题是，如果我试图将<div id="map-canvas"></div>包含在任何其他div或Bootstrap 3样式中，例如在<div class="col-xs-6"></div>内部，它将无法呈现在我的页面上。然而，只要它不包含在另一个div中，它就会呈现出来。

我找到了一条建议此修复的提示，指示将google-map-canvas类添加到map-canvas div中，使用以下代码：

.google-map-canvas,
.google-map-canvas * { .box-sizing(content-box); }

我已将此代码添加到bootstrap.min.css中，然后将div更改为<div class="google-map-canvas" id="map-canvas"></div>，但canvas仍无法在任何其他需要Bootstrap 3样式的div内呈现。

我需要将此地图定位在我的联系页面的右半部分，并将联系表单放在页面的左半部分。 如果有任何修复建议，请告知。

以下是我的测试代码：

JAVASCRIPT（在“base.html”上）：

{% if on_contactpage %}
   <style type="text/css">
          html { height: 100% }
          body { height: 100%; margin: 0; padding: 0 }
          #map-canvas { height: 100% }
   </style>
     <script type="text/javascript"
          src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&sensor=false">
     </script>
     <script type="text/javascript">
          function initialize() {
            var mapOptions = {
              center: new google.maps.LatLng(-34.397, 150.644),
              zoom: 8,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map-canvas"),
                mapOptions);
          }
          google.maps.event.addDomListener(window, 'load', initialize);
     </script>
{% endif %}

HTML：

<div class="row">

    <div class="col-xs-6">

        <h2> contact form goes here</h2>

    </div>

      <div class="col-xs-6">

            <div class="google-map-canvas" id="map-canvas">
            </div>

        <div class="col-xs-6">
            <h2>Hong Kong</h2>
            <address>
                <strong>HK Business Address</strong><br>
                100 Business Address<br>
                Kowloon<br>
                Hong Kong<br>
                Hong Kong<br>
                Zip Code N/A<br>
                <abbr title="Phone">P:</abbr> 01234 567 890
            </address>
        </div>

        <div class="col-xs-6">


          <h2>Shenzhen, P.R.C.</h2>
            <address>
                <strong>SZ Business Address</strong><br>
                100 Business Address<br>
                Futian District<br>
                <br>
                Shenzhen, Guangdong<br>
                518000<br>
                <abbr title="Phone">P:</abbr> 01234 567 890
            </address>
        </div>
      </div>

</div>

- Bob Jordan

---

CSS语法似乎不正确，请尝试使用.google-map-canvas,.google-map-canvas * { box-sizing:content-box; }。 - omma2289

是的，Bootstrap开发人员编写的代码也让我的PyCharm IDE报错，所以我进行了上述修改。这个更改并没有解决渲染问题，但它停止了PyCharm的报错。 - Bob Jordan

Answer 1

由于map-canvas被包含在其他容器（html,body,row,col-xs-6）中，因此您需要将其高度设置为像素。

#map-canvas {
    width:100%;
    height:500px;
}

..或将所有map-canvas容器设置为height:100%..

html, body, .row, .col-xs-6 { height: 100% }

您可以在包含map-canvas的.row中指定一个id，然后将其用于CSS特殊性...

html, body, #myrowid, #myrowid .col-xs-6 { height: 100% }

这里是在Bootply上的一个可工作的示例：http://bootply.com/77513

- Zim

---

将高度修改为“px”以指定像素大小最终是最好的解决方法。谢谢！ - Bob Jordan

@smewp 同样，#map-canvas { height: 200px } 就解决了问题！ - Michael David Watson

像素高度也帮了我大忙 - 我永远不会想到这个！ - Alex