我通过融合表图层功能设置了带有国家覆盖的谷歌地图。
在这里完美运行: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 中所见)。
很遗憾,我无法为您提供指向我网站的链接,它目前托管在我的笔记本电脑上。
有什么调试方法吗?
最佳答案
这是一个 CSS 问题,由这条规则强制执行(在 style.cab.css 中):
img{max-width:100%;}
添加这条规则:
#map-canvas img{max-width:none;}
关于javascript - Google Maps JS APi v3 融合表层在 Chrome 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27899989/