javascript - 谷歌地图信息窗口滚动错误 : How to solve for all cases?

Question

这是一个known bug Google Maps API 在第一次(时间)点击信息窗口时显示滚动条，

问题，第一次:

其余时间:

所以我found out添加 maxWidth 解决了问题，

对我来说，不是；如果我将 maxWidth 设置为 200px，滚动条就会消失，但它比我需要的要小，

如果我设置 250px(我需要的大小)，滚动条仍然存在

知道我可以尝试什么吗？

jsfiddle:http://jsfiddle.net/e0x20tvs/3/

$sescam_ventana = {
  init: function() {
    this.mapa();
  },
  mapa: function() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=$sescam_ventana.mapSetup';
    document.body.appendChild(script);
  },
  mapSetup: function() {
    var styles = [
      /*
			{
				stylers: [
					{ saturation: -100 }
				]
			},{
				featureType: "road",
				elementType: "geometry",
				stylers: [
					{ visibility: "simplified" }
				]
			},{
				featureType: "poi.business",
				elementType: "labels",
				stylers: [
					{ visibility: "simplified" }
				]
			}
		*/
    ];
    var styledMap = new google.maps.StyledMapType(styles, {
      name: "SESCAM"
    }); //
    var mapOptions = {
      zoom: 16,
      scrollwheel: false,
      center: new google.maps.LatLng(39.6177074, 4.9725879),
      mapTypeControlOptions: {
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
      }
    }
    var handleMarkerClick = function(marker, index) {
      var $navigationMenu = jQuery('<div>');
      jQuery('.menu-item').each(function(i) {
        var $button = jQuery('<button>');
        $button.text(jQuery(this).text());
        $button.addClass(jQuery(this).data('class'));
        $navigationMenu.append($button);
      });
      if (typeof infowindow === 'undefined') {
        infowindow = new google.maps.InfoWindow({
          height: 380
        });
      }
      var centro = infoCentros[index] //helpful data
      infowindow.setContent(
        '<div class="sescam-info-window">' +
        '<h3>' + centro.nombre + '</h3>' +
        '<p>' + centro.lugar + '</h3>' +
        '<p class="titulo">Coordinador</p>' +
        '<p><strong>' + centro.coordinador.nombre + '</strong></p>' +
        '<p><a href="mailto:' + centro.coordinador.email + '">' + centro.coordinador.email + '</a></p>' +
        '<p class="titulo">Responsable</p>' +
        '<p><strong>' + centro.responsable.nombre + '</strong></p>' +
        '<p><a href="mailto:' + centro.responsable.email + '">' + centro.responsable.email + '</a></p>' +
        '<div class="menu">' + $navigationMenu.html() + '</div>' + '</div>'

      );
      infowindow.open(marker.getMap(), marker);
    }
    var handleMenu = function() {
      jQuery('body').on('click', '.menu button', function() {
        var itemClass = jQuery(this).attr('class');
        jQuery('.listado.' + itemClass).stop(true, true).slideDown().siblings('.listado').stop(true, true).slideUp();
      });
    }
    this.gmap = new google.maps.Map(document.getElementById('mapa'), mapOptions);
    this.gmap.mapTypes.set('map_style', styledMap);
    this.gmap.setMapTypeId('map_style');
    this.mapMarkers = [];
    this.mapInfoWindow = new google.maps.InfoWindow({
      height: 380
    });
    jQuery(window).resize(function() {
      $sescam_ventana.gmap.fitBounds($sescam_ventana.mapBounds);
    });
    for (var i = 0; i < this.mapMarkers.length; i++) {
      // primero eliminamos todos los markers que pudiera haber de una visualización anterior
      this.mapMarkers[i].setMap(null);
    }
    this.mapMarkers.length = 0; // reseteamos el array
    this.mapBounds = new google.maps.LatLngBounds();
    var c = 0; // de inicio no sabemos cuantos elementos tienen realmente latitud y longitud, este contador nos lo chivará
    var latlon; // lo guardamos fuera del each para poder verlo después, si resulta que es el único elemeto a mostrar
    for (var i = 0; i < infoCentros.length; i++) {
      var centro = infoCentros[i];
      var lat = centro.cordenadas.lat;
      var lon = centro.cordenadas.long;
      if (lat && lon) {
        c++;
        latlon = new google.maps.LatLng(lat, lon);
        var moptions = {
          position: latlon,
          map: $sescam_ventana.gmap
        }
        moptions.icon = 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/256/Map-Marker-Marker-Outside-Pink-icon.png';
        var marker = new google.maps.Marker(moptions);
        $sescam_ventana.mapMarkers.push(marker);
        //google.maps.event.addListener(marker, 'click', handleMarkerClick);
        google.maps.event.addListener(marker, 'click', handleMarkerClick.bind(undefined, marker, i));

        $sescam_ventana.mapBounds.extend(latlon);
      }
    }
    if (c > 1) {
      $sescam_ventana.gmap.fitBounds(this.mapBounds);
    } else {
      // si solo hay uno el fitbounds no hace un zoom ni un centrado correctos
      $sescam_ventana.gmap.setCenter(latlon);
    }
    handleMenu();
  }
}
jQuery(function() {
  $sescam_ventana.init();
});

.gmapa {
  position: relative;
  padding-bottom: 50%;
}
#mapa {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gmapa">
  <script>
    var infoCentros = [{
      "nombre": "El nombre 0",
      "texto": "Lorem ipsum sit met hamet amid0",
      "lugar": "Toledo",
      "coordinador": {
        "nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
        "email": "anapilar@gmail.com"
      },
      "responsable": {
        "nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
        "email": "anapilar@gmail.com"
      },
      "cordenadas": {
        "lat": 39.150544196,
        "long": -4.8019412125
      }
    }, {
      "nombre": "El nombre 1",
      "texto": "Lorem ipsum sit met hamet amid1",
      "lugar": "Toledo",
      "coordinador": {
        "nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
        "email": "anapilar@gmail.com"
      },
      "responsable": {
        "nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
        "email": "anapilar@gmail.com"
      },
      "cordenadas": {
        "lat": 39.150544196,
        "long": -4.7019412125
      }
    }, {
      "nombre": "El nombre 2",
      "texto": "Lorem ipsum sit met hamet amid2",
      "lugar": "Toledo",
      "coordinador": {
        "nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
        "email": "anapilar@gmail.com"
      },
      "responsable": {
        "nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
        "email": "anapilar@gmail.com"
      },
      "cordenadas": {
        "lat": 39.150544196,
        "long": -4.6019412125
      }
    }, {
      "nombre": "El nombre 3",
      "texto": "Lorem ipsum sit met hamet amid3",
      "lugar": "Toledo",
      "coordinador": {
        "nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
        "email": "anapilar@gmail.com"
      },
      "responsable": {
        "nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
        "email": "anapilar@gmail.com"
      },
      "cordenadas": {
        "lat": 39.150544196,
        "long": -4.5019412125
      }
    }, {
      "nombre": "El nombre 4",
      "texto": "Lorem ipsum sit met hamet amid4",
      "lugar": "Toledo",
      "coordinador": {
        "nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
        "email": "anapilar@gmail.com"
      },
      "responsable": {
        "nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
        "email": "anapilar@gmail.com"
      },
      "cordenadas": {
        "lat": 39.150544196,
        "long": -4.4019412125
      }
    }];
  </script>
  <div id="mapa"></div>
</div>

Answer 1

编辑

在您的特定情况下，它与 Roboto 网络字体有关。它包含在 Google Maps API 中，但在打开 InfoWindow 之前您的页面上没有使用它，因此浏览器没有理由下载它，也没有下载它。

但是，当您打开 infoWindow 时，此时的浏览器意识到它需要字体，并开始下载它，但是 google maps 在下载字体之前已经测量了 infoWindow 的大小(请参阅有关 google maps 的原始答案api 衡量 infoWindow 的大小)。当字体下载完成后，infoWindow 中的内容将重新绘制为 Roboto 字体，这实际上使 infoWindow 的大小与 Google 在下载字体之前测量的大小不同(更大)，并且在此处点你会看到滚动条。

这也解释了为什么您第一次看到滚动条 - 当 google maps 在下载字体之前测量 infoWindow - 但之后您将看不到它们 - 因为字体已经下载，无论 google maps 现在采取什么测量都将是正确的。

所以，解决办法是

a) 在第一个信息窗口打开之前，在您的页面上呈现一些 Roboto 字体(导致浏览器下载该字体)或

b) 为您的 infoWindow 内容使用不同的字体(在页面其他地方使用的字体，因此在页面加载时下载)。

我将留下我的其余答案，因为这是对 infoWindows 工作方式的普遍误解，而且正如您在 google 搜索中指出的那样，很多人都被它挂断了。

TLDR:

切勿使用父选择器(例如 #map-canvas)来设置 infoWindow 的 HTML 内容的样式。

这不是错误。以下是谷歌地图信息窗口样式的工作原理:

当您告诉 google maps API 您想要打开一个包含 HTML 内容的信息窗口时，google 会动态创建一个 div 元素，将其附加到您的 body 标签中，获取动态创建的 div 的测量值，然后将这些元素附加到一个 div 中测量到 map ，这是您的信息窗口。

这就是技巧发挥作用的地方。

假设这是您的 HTML:

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

这是您的信息窗口内容:

<h1>I'm an infoWindow</h1>
<p>Hi there!</p>

这是您的 CSS:

h1 { font-size: 18px; }
#map-canvas h1 { font-size: 24px; }

Google 几乎总是会错误地绘制此 infoWindow - 因为当它动态创建 infoWindow div 并将其附加到 body 以获取测量值时，div 将具有 18px 的 h1 字体大小。所以现在谷歌有了测量结果并将这个 div 放在 map 上，此时 h1 字体大小增加到 24px 所以现在谷歌正在使用 错误的测量结果，您的信息窗口最终会出现滚动条。

我一直发现使用 infoWindow CSS 的最简单方法是使用包装器 div 并始终以它为目标，因此您的 infoWindow HTML 内容看起来像:

<div class="info-window-content">
    <h1>I'm an infoWindow</h1>
    <p>Hi there!</p>
</div>

然后你的 CSS 看起来像:

/* global styles */
h1 { font-size: 18px; }
p { line-height: 1.6; }

/* info window styles */
.info-window-content h1 { font-size: 24px; }
.info-window-content p { line-height: 1.2; }

而且您最终不会在信息窗口中看到滚动条。