javascript - Google Maps JS APi v3 融合表层在 Chrome 中不起作用

Question

我通过融合表图层功能设置了带有国家覆盖的谷歌地图。

在这里完美运行:http://codepen.io/anon/pen/ZYLPNO

function loadMap() {
			var script = document.createElement('script');
			script.type = 'text/javascript';
			//script.src = 'http://maps.googleapis.com/maps/api/js?v=3.exp&key=' + settings.api_key + '&' + 'callback=initMap';
		  	script.src = 'http://maps.googleapis.com/maps/api/js?v=3.exp' + '&' + 'callback=initMap';
			document.body.appendChild(script);
		}

initMap = function() {
			var google = window.google || {};

	 		var c_map = new google.maps.Map(document.getElementById('map-canvas'), {
	 			center: new google.maps.LatLng(30,0),
	 			zoom: 2,
	 			disableDefaultUI: true,
	 			mapTypeId: google.maps.MapTypeId.ROADMAP
	 		});

	 		var world_geometry = new google.maps.FusionTablesLayer({
	 			query: {
	 				select: 'geometry',
	 				from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk',
	 				where: "Name IN ('Russia','France')"
	 			},
	 			styles: [{
	 				where: "Name = 'France'",
	 				markerOptions: {
						iconName: 'red_circle'
					},
	 				polygonOptions: {
	 					fillColor: '#EB6841',
	 					fillOpacity: 0.3
	 				}
	 			}, {
	 				where: "Name = 'Russia'",
	 				polygonOptions: {
	 					fillColor: '#00A0B0',
	 					fillOpacity: 0.5
	 				}
	 			}],
	 			map: c_map,
	 			suppressInfoWindows: true
	 		});

	 		google.maps.event.addListener(world_geometry, 'click', function(e) {
	 			document.location.href = document.location.protocol + '//' + document.location.host + '/countries/' + e.row.Name.value.toLowerCase();
	 		});
	 	};
loadMap();

#map-canvas, html, body {
  height: 200px;
  width: 300px;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  z-index: 2;
  box-sizing: border-box;
  word-wrap: break-word;
  font-size: 20px;
font-style: normal;
font-weight: normal;
height: 300px;
line-height: 30px;
  box-shadow: 0px 3px 5px 0 #333
}

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

但嵌入我网站的相同代码在 Firefox(windows、mac、android)、Safari(iOS、Mac)、IE11(Windows)中运行，但在 Chrome(Mac、Windows、Android)上不起作用。

没有 javascript 错误， map 只是显示而没有覆盖。我什至试图删除我页面上除此之外的所有 js。我还完全复制了我网站上的样式(如您在 codepen 中所见)。

很遗憾，我无法为您提供指向我网站的链接，它目前托管在我的笔记本电脑上。

有什么调试方法吗？

Answer 1

这是一个 CSS 问题，由这条规则强制执行(在 style.cab.css 中):

img{max-width:100%;}

添加这条规则:

 #map-canvas img{max-width:none;}