我正在使用嵌入Google Fusion桌面的地图,该地图似乎在桌面上运行良好但不会出现在iPad上。
我不确定如何在iPad上修复,因此我一直在使用Chrome扩展程序“用户代理切换器”并在开发人员工具中使用设备模式。当我这样做时,我得到控制台错误:
“Uncaught TypeError:无法读取属性'style'的null”
有谁知道造成这种情况的原因是什么?
Codepen:http://codepen.io/anon/pen/KzVLvR
<meta name="viewport"></meta>
<notextile><style type="text/css">
#googft-mapCanvas {
height: 500px;
margin: 0;
padding: 0;
width: 100%;
}
</style></notextile>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&v=3"></script>
<script type="text/javascript">
function initialize() {
google.maps.visualRefresh = true;
var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) ||
(navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
if (isMobile) {
var metaTag=document.createElement('meta');
metaTag.name = "viewport"
metaTag.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
document.getElementsByTagName('head')[0].appendChild(metaTag);
}
var mapDiv = document.getElementById('googft-mapCanvas');
mapDiv.style.width = isMobile ? '100%' : '100%';
mapDiv.style.height = isMobile ? '100%' : '500px';
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(50.86921697720649, 0.18021480234369847),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open'));
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));
var myLatLng = {lat: 50.878353, lng: 0.063805};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Glyndebourne',
icon: 'http://res.cloudinary.com/glyndebourne/image/upload/v1456245664/gicon_afipi7.png'
});
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "col4",
from: "1_wBUixHJqO_W95zMHk_eP8wQKBuXvHEfvNgfTBSC",
where: ""
},
options: {
styleId: 4,
templateId: 4
}
});
if (isMobile) {
var legend = document.getElementById('googft-legend');
var legendOpenButton = document.getElementById('googft-legend-open');
var legendCloseButton = document.getElementById('googft-legend-close');
// CONSOLE ERROR REFERS TO THIS NEXT LINE:
legend.style.display = 'none';
legendOpenButton.style.display = 'block';
legendCloseButton.style.display = 'block';
legendOpenButton.onclick = function() {
legend.style.display = 'block';
legendOpenButton.style.display = 'none';
}
legendCloseButton.onclick = function() {
legend.style.display = 'none';
legendOpenButton.style.display = 'block';
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="googft-mapCanvas"></div>
答案 0 :(得分:1)
尽管与问题无关,但请完全删除此部分:
if (isMobile) {
var legend = document.getElementById('googft-legend');
var legendOpenButton = document.getElementById('googft-legend-open');
var legendCloseButton = document.getElementById('googft-legend-close');
// CONSOLE ERROR REFERS TO THIS NEXT LINE:
legend.style.display = 'none';
legendOpenButton.style.display = 'block';
legendCloseButton.style.display = 'block';
legendOpenButton.onclick = function() {
legend.style.display = 'block';
legendOpenButton.style.display = 'none';
}
legendCloseButton.onclick = function() {
legend.style.display = 'none';
legendOpenButton.style.display = 'block';
}
}
问题在于:
mapDiv.style.width = isMobile ? '100%' : '100%';
mapDiv.style.height = isMobile ? '100%' : '500px';
在移动设备上,脚本会将mapDiv的宽度和高度设置为100%。 设置百分比值需要为父节点(正文)设置这些值(宽度/高度)....但它们未设置,因此可能无法计算mapDiv的宽度和高度。
修正:将html
和body
的宽度/高度设置为100%
/**CSS**/
html,body{
height:100%;
width:100%;
}