javascript - 谷歌地图与谷歌 MDL 标签问题

Question

我正在尝试在选项卡中实现谷歌地图 View 。我正在为选项卡使用 Google 的 Material Design Lite 框架。 我有几个问题，为此我咨询了以下 SO 问题。两者都没有提供完美的解决方案，但他们确实部分解决了我的问题。

Google Map Infowindow not showing properly

Problems with Google Maps API v3 + jQuery UI Tabs

但是，一些烦人的错误仍然存​​在。

第一个是关于 map 本身的渲染。我只有在左上角出现通常的 map 问题。我像这样重新排列了我的 javascript 代码:

$(function() {
  $('.map-tab').click(function() {
    initialize();
  })
});

function initialize() {
  var mapCanvas = document.getElementById('map');
  var mapOptions = {
    center: new google.maps.LatLng(44.5403, -78.5463),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(mapCanvas, mapOptions);
}

body {
  font-family: sans-serif;
  background: #eee;
}
a,
h1,
h2 {
  color: #377ba8;
  text-decoration: none;
}
h1,
h2 {
  font-family: 'Georgia', serif;
  margin: 0;
}
h1 {
  border-bottom: 2px solid #eee;
}
h2 {
  font-size: 1.2em;
}
fieldset {
  /*float: left;*/
  clear: both;
  width: 100%;
  margin: 0 0 -1em 0;
  padding: 0 0 1em 0;
  border-style: none;
  border-top: 1px solid #BFBAB0;
  /*background-color: #F2EFE9;*/
}
legend {
  margin-left: 1em;
  color: #000000;
  font-weight: bold;
}
legend span {
  /*position: absolute;*/
  /*margin-top: 0.5em;*/
  /*font-size: 135%;*/
}
fieldset ol {
  padding: 0 0 0 2em;
  list-style: none;
}
ul {
  padding: 0 1em 0 1em;
  list-style: none;
}
fieldset li div {
  float: left;
  clear: left;
  width: 100%;
  padding-bottom: 1em;
}
fieldset.submit {
  float: none;
  width: auto;
  border: 0 none #FFF;
  padding-left: 12em;
}
label {
  float: left;
  width: 10em;
  margin-right: 1em;
  text-align: right;
}
img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto\9;
  /* ie8 */
}
td {
  border: 1px;
}
.page {
  margin: 2em auto;
  width: 65em;
  /*border: 5px solid #ccc;*/
  /*padding: 0.8em;*/
  background: white;
}
.mdl-layout__content {
  background: white;
}
.entries {
  list-style: none;
  margin: 0;
  padding: 0;
}
.entries li {
  margin: 0.8em 1.2em;
}
.entries li h2 {
  margin-left: -1em;
}
.add-entry {
  font-size: 0.9em;
  border-bottom: 1px solid #ccc;
}
.add-entry dl {
  font-weight: bold;
}
.metanav {
  /*text-align: right; font-size: 0.8em;*/
  padding: 0.3em;
  margin-bottom: 1em;
  background: #fafafa;
}
.flash {
  background: #cee5F5;
  padding: 0.5em;
  border: 1px solid #aacbe2;
}
.error {
  background: #f0d6d6;
  padding: 0.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.indigo-blue.min.css" rel="stylesheet" />
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://maps.googleapis.com/maps/api/js?v=3.20"></script>
<style type="text/css">
  #map {
    width: auto;
    /*500px;*/
    height: 400px;
    overflow: hidden;
    max-width: none;
    /*background-color: #CCC;*/
  }
  #map img {
    max-width: none;
  }
</style>

<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
  <div class="mdl-tabs__tab-bar">
    <a href="#listings-panel" class="mdl-tabs__tab is-active">Listings</a>
    <a href="#map-panel" class="mdl-tabs__tab map-tab">Map View</a>
    <a href="#compare-panel" class="mdl-tabs__tab">Compare Selections</a>
  </div>

  <div class="mdl-tabs__panel is-active" id="listings-panel">
  </div>
  <div class="mdl-tabs__panel" id="map-panel">
    <div id="map"></div>
  </div>
  <div class="mdl-tabs__panel" id="compare-panel">
  </div>
</div>

这会在初始查看时很好地呈现 map 部分。但是一旦你开始切换选项卡，它就会返回到仅在 Canvas 的顶 Angular 呈现。 (但是，如果您连续第二次单击 map 的选项卡，它会再次完美呈现。)

第二个问题是 map 控件在垂直方向上被压扁了。我能找到的唯一解决方法是将 img 的最大宽度设置为无。我已经尝试过了，但无济于事。

上面的代码片段很好地说明了我遇到的问题。任何有关如何解决此问题的想法将不胜感激!

Answer 1

你的问题是

1. 您将此 css 应用于破坏控件的 img:

img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto\9;
    /* ie8 */
}

您需要覆盖最大宽度和最大高度

#map img {
    max-width: none !important;
    max-height: none !important;
}

1. 您需要在显示选项卡后触发 map 调整大小事件

proof of concept fiddle