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

Google Maps JS APi v3 fusion table layer is not working in Chrome

本文关键字:Chrome 不起作用 融合 Maps JS APi v3 Google      更新时间:2023-09-26

我通过融合表图层功能设置了一个带有国家/地区叠加的谷歌地图。

在这里完美工作: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,除了这个。我还完全按照我的网站上的样式复制了样式(如您在代码笔中看到的那样)。

不幸的是,我无法为您提供指向我的网站的链接,它现在托管在我的笔记本电脑上。

任何想法如何调试?

这是一个

CSS问题,由这个规则(风格.cab.css

):
img{max-width:100%;}

添加此规则:

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