那些遇到过的问题

谷歌地图infowindow滚动错误:如何解决所有情况？

Ton*_*bet 7 html javascript css google-maps

谷歌地图API显示第一个(时间)点击信息窗口的滚动条是一个众所周知的错误,

这个问题,第一次:

在此输入图像描述

其余时间:

在此输入图像描述

所以我发现添加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();
});
Run Code Online (Sandbox Code Playgroud) 
.gmapa {
  position: relative;
  padding-bottom: 50%;
}
#mapa {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

Ada*_*dam 5

编辑

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

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

这也解释了为什么您第一次看到滚动条——当谷歌地图在字体下载之前测量信息窗口时——但之后你不会看到它们——因为字体已经下载，谷歌地图现在采取的任何测量都将是正确的.

所以，解决办法是

a)在打开第一个 infoWindow 或

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

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

域名注册地址：

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

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

当你告诉谷歌地图 API 你想打开一个包含 HTML 内容的信息窗口时，谷歌动态创建一个 div 元素，将它附加到你的 body 标签，获取动态创建的 div 的测量值，然后将带有这些测量值的 div 附加到地图这是您的信息窗口。

这就是诀窍发挥作用的地方。

假设这是您的 HTML：

<div id="map-canvas">
</div>
Run Code Online (Sandbox Code Playgroud)

这是您的 infoWindow 内容：

<h1>I'm an infoWindow</h1>
<p>Hi there!</p>
Run Code Online (Sandbox Code Playgroud)

这是你的 CSS：

h1 { font-size: 18px; }
#map-canvas h1 { font-size: 24px; }
Run Code Online (Sandbox Code Playgroud)

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

我一直发现使用 infoWindow CSS 的最简单方法是使用包装 div 并始终以它为目标，因此您的 infoWindow HTML 内容将如下所示：

<div class="info-window-content">
    <h1>I'm an infoWindow</h1>
    <p>Hi there!</p>
</div>
Run Code Online (Sandbox Code Playgroud)

然后你的 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; }
Run Code Online (Sandbox Code Playgroud)

并且您的信息窗口中不会出现滚动条。

  • 请，对于阅读此评论线程的其他人 - 请注意，更改字体系列 ** 不会** 解决滚动条问题，但请确保必须已经下载呈现信息窗口内容（包括字体）所需的所有内容（除外图像，处理方式不同）以便谷歌地图 api 获得正确的测量值，以便您的信息窗口可以在没有滚动条的情况下显示。 (2认同)

归档时间：

查看次数：

1513 次

最近记录：

6 年，4 月 前
相关归档
HTML中"role"属性的目的是什么？ 1122
TypeError:无法读取未定义的属性'then' 89
有没有办法在javascript上以相反的顺序在数组上使用map()？ 62
Javascript返回两个日期之间的天数,小时数,分钟数,秒数 49
如何垂直创建可滚动的Div标签？ 32
Web上的字体 24
如何增加引导按钮的大小？ 20
如何在Firebug for Firefox中编辑Chrome中的CSS？ 18
在Google地图,PHP和MySQL上进行近端位置搜索 3
显示多个标记时单击另一个标记时如何关闭信息窗口 0
难疑归档
可以在JSON中使用注释吗？ 7104
在一行中捕获多个异常(块除外) 2521
如何在JavaScript中清空数组？ 2198
在Node.js中编写文件 1538
我应该在哪里将<script>标记放在HTML标记中？ 1392
如何使用CSS设置<select>下拉列表的样式？ 1258
为什么我们需要C++中的虚函数？ 1223
visibility:hidden和display:none之间有什么区别？ 1121
同步检查Node.js中是否存在文件/目录 1113
jQuery的jquery-1.10.2.min.map触发了404(未找到) 1051