Google Maps JS APi v3 融合表层在 Chrome 中不起作用
Google Maps JS APi v3 fusion table layer is not working in Chrome
我通过融合表图层功能设置了一个带有国家/地区叠加的谷歌地图。
在这里完美工作: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;}
相关文章:
- XMLHttpRequest在移动设备上的chrome上不起作用
- ng disabled在chrome中不起作用.按钮在角度上未禁用
- 鼠标输入在 YUI 的 chrome 中不起作用
- Javascript的某些部分在Chrome中不起作用,但在其他浏览器中可以完美工作
- HTML5视频链接在Chrome中不起作用
- jQuery克隆函数在chrome中不起作用
- jQuery place attr src在Chrome中不起作用
- chrome中的onmouseover(下拉选项标记)事件不起作用-php,javascript
- .ajax调用在chrome中不起作用
- Javascript/AAJAX在Opera中不起作用,在FF/IE/Chrome中完美工作
- 正在处理在chrome扩展中不起作用的js
- MediaSource API demo不起作用(Chrome)
- Chrome 中表格的 CSV 导出不起作用 - JavaScript/AngularJS
- $.getJSON 在 Chrome 和 Safari 中不起作用
- OnClick 事件在 Chrome 中不起作用
- getUserMedia 在 Chrome v50.0.2661.86 上不起作用
- dataTransfer.set拖放的数据在chrome中不起作用
- 简单的鼠标悬停在 Chrome 中不起作用
- window.close();在Chrome和Firefox中不起作用
- Chrome 扩展程序权限不起作用