javascript Uncaught RangeError: Invalid array length in Chrome version 36.0.1985.5 dev -m
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23702115/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught RangeError: Invalid array length in Chrome version 36.0.1985.5 dev -m
提问by JSWright91
I have a google Map API setup Here, and only Google Chrome will throw an 'Uncaught RangeError: Invalid array length'.
Here is the code in question:
我在这里有一个谷歌地图 API 设置，只有谷歌浏览器会抛出“未捕获的范围错误：数组长度无效”。
这是有问题的代码：
var map;
var phoenix = new google.maps.LatLng(33.551946,-112.109985);
var locOne = new google.maps.LatLng(33.541061,-112.293369);
var locTwo = new google.maps.LatLng(33.37738,-111.833271);
var locThree = new google.maps.LatLng(33.454742,-112.099701);
var locFour = new google.maps.LatLng(33.673617,-112.020856);
function HomeControl (controlDiv, map){
// create div to hold the controls
var controlDiv = document.createElement('div');
controlDiv.class = 'gmnoprint';
controlDiv.style.marginTop = '5px';
controlDiv.index = 1;
// set CSS for the control border
var controlUI = document.createElement('div');
controlUI.id = 'border';
controlUI.style.backgroundColor = '#fff';
controlUI.style.cursor = 'pointer';
controlUI.textAlign = 'center';
controlUI.title = 'Click to reset the map';
controlDiv.appendChild(controlUI);
// set CSS for control interior
var controlText = document.createElement('div');
controlText.id = 'reset';
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '13px';
controlText.innerHTML = '<b>Reset Map</b>';
controlUI.appendChild(controlText);
// create div to hold the controls for the locations
var controlLocDiv = document.createElement('div');
controlLocDiv.class = 'gmnoprint';
controlLocDiv.style.marginTop = '5px';
controlLocDiv.style.marginRight = '5px';
controlLocDiv.index = 1;
// set CSS for the control border
var controlWestUI = document.createElement('div');
controlWestUI.id = 'border';
controlWestUI.style.backgroundColor = '#fff';
controlWestUI.style.cursor = 'pointer';
controlWestUI.textAlign = 'center';
controlWestUI.title = 'Click to set the map to West Valley';
controlLocDiv.appendChild(controlWestUI);
// set CSS for control interior
var controlWestText = document.createElement('div');
controlWestText.id = 'West';
controlWestText.style.fontFamily = 'Arial,sans-serif';
controlWestText.style.fontSize = '13px';
controlWestText.style.paddingRight = '5px';
controlWestText.style.paddingLeft = '5px';
controlWestText.innerHTML = '<div>West Valley</div>';
controlWestUI.appendChild(controlWestText);
// set CSS for the control border
var controlEastUI = document.createElement('div');
controlEastUI.id = 'border';
controlEastUI.style.backgroundColor = '#fff';
controlEastUI.style.cursor = 'pointer';
controlEastUI.textAlign = 'center';
controlEastUI.title = 'Click to set the map to East Valley';
controlLocDiv.appendChild(controlEastUI);
// set CSS for control interior
var controlEastText = document.createElement('div');
controlEastText.id = 'East';
controlEastText.style.fontFamily = 'Arial,sans-serif';
controlEastText.style.fontSize = '13px';
controlEastText.style.paddingRight = '5px';
controlEastText.style.paddingLeft = '5px';
controlEastText.innerHTML = '<div>East Valley</div>';
controlEastUI.appendChild(controlEastText);
// set CSS for the control border
var controlDowntownUI = document.createElement('div');
controlDowntownUI.id = 'border';
controlDowntownUI.style.backgroundColor = '#fff';
controlDowntownUI.style.cursor = 'pointer';
controlDowntownUI.textAlign = 'center';
controlDowntownUI.title = 'Click to set the map to Downtown Phoenix';
controlLocDiv.appendChild(controlDowntownUI);
// set CSS for control interior
var controlDowntownText = document.createElement('div');
controlDowntownText.id = 'Downtown';
controlDowntownText.style.fontFamily = 'Arial,sans-serif';
controlDowntownText.style.fontSize = '13px';
controlDowntownText.style.paddingRight = '5px';
controlDowntownText.style.paddingLeft = '5px';
controlDowntownText.innerHTML = '<div>Downtown Phoenix</div>';
controlDowntownUI.appendChild(controlDowntownText);
// set CSS for the control border
var controlNorthUI = document.createElement('div');
controlNorthUI.id = 'border';
controlNorthUI.style.backgroundColor = '#fff';
controlNorthUI.style.cursor = 'pointer';
controlNorthUI.textAlign = 'center';
controlNorthUI.title = 'Click to set the map to North Phoenix';
controlLocDiv.appendChild(controlNorthUI);
// set CSS for control interior
var controlNorthText = document.createElement('div');
controlNorthText.id = 'North';
controlNorthText.style.fontFamily = 'Arial,sans-serif';
controlNorthText.style.fontSize = '13px';
controlNorthText.style.paddingRight = '5px';
controlNorthText.style.paddingLeft = '5px';
controlNorthText.innerHTML = '<div>North Phoenix</div>';
controlNorthUI.appendChild(controlNorthText);
// Setup click event listeners: click to reset map
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(phoenix);
map.setZoom(10);
});
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);
map.controls[google.maps.ControlPosition.RIGHT].push(controlLocDiv);
//setup click event listeners: click to set position to West Phoenix
google.maps.event.addDomListener(controlWestUI, 'click', function() {
map.panTo(locOne);
map.setZoom(14);
});
//setup click event listeners: click to set position to East Phoenix
google.maps.event.addDomListener(controlEastUI, 'click', function() {
map.panTo(locTwo);
map.setZoom(14);
});
//setup click event listeners: click to set position to Downtown Phoenix
google.maps.event.addDomListener(controlDowntownUI, 'click', function() {
map.panTo(locThree);
map.setZoom(14);
});
//setup click event listeners: click to set position to North Phoenix
google.maps.event.addDomListener(controlNorthUI, 'click', function() {
map.panTo(locFour);
map.setZoom(14);
});
}
function initialize() {
var mapDiv = document.getElementById('map_canvas1');
var myLatLng1 = new google.maps.LatLng(33.523103,-112.042593);
var map_options1 = {center: myLatLng1,zoom: 10,scrollwheel: false,zoomControl: true,zoomControlOptions: {style: google.maps.ZoomControlStyle.LARGE},mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,position: google.maps.ControlPosition.TOP_RIGHT},mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(mapDiv, map_options1);
setMarkers(map, locations);
//Create DIV to hold control
//Call the HomeControl() constructor passing
//in this DIV.
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map);
homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}
var locations = [['West Valley', 33.541061,-112.293369],['East Valley', 33.37738,-111.833271],['Downtown Phoenix', 33.454742,-112.099701],['North Phoenix', 33.673617,-112.020856]];
function setMarkers(map, locations){
var icon = {
url: 'http://www.bpisite.com/ico/bpi2.png',
size: new google.maps.Size(52, 36),
origin: myLatLng,
anchor: myLatLng
};
var shadow = {
url: 'http://www.bpisite.com/ico/bpi2_shadow.png',
size: new google.maps.Size(72, 36),
origin: myLatLng,
anchor: myLatLng
};
for (var i in locations) {
var loc = locations[i];
var myLatLng = new google.maps.LatLng(loc[1], loc[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: icon,
shadow: shadow,
title: loc[0],
zIndex: loc[3]
});
marker.setMap(map);
attachListener(marker, 'marker:'+1);
}
function attachListener(marker){
google.maps.event.addDomListener(marker, 'click', function() {
window.setTimeout(function() {
map.panTo(marker.getPosition());
}, 500);
window.setTimeout(function() {
map.setZoom(16);
}, 1000);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
It seems to load everything but the icons and custom buttons I have set up. The map will work like normal, draggable, and scroll-able via double-clicking, but the entire UI is hidden.
它似乎加载了除我设置的图标和自定义按钮之外的所有内容。地图将像正常一样工作，可通过双击进行拖动和滚动，但整个 UI 是隐藏的。
This code has worked just fine in earlier versions of Chrome, but for whatever reason, this new update has messed up the code.
这段代码在早期版本的 Chrome 中运行良好，但无论出于何种原因，这个新的更新都搞砸了代码。
回答by Cihad Turhan
The problem is not about your code. It's a bug in google maps api/chrome.
问题不在于您的代码。这是谷歌地图 api/chrome 中的一个错误。
Here is the problem: if you try to define an array with an integer, there won't be a problem
问题来了：如果你尝试用整数定义一个数组，就不会有问题
var arr = Array(50);
var arr = Array(50);
but, if you define an array with a float, you will get this error
但是，如果你用浮点数定义一个数组，你会得到这个错误
var arr = Array(50.5); // => Uncaught RangeError: Invalid array length
var arr = Array(50.5); // => Uncaught RangeError: Invalid array length
This is because chrome started to calculate widthand heightas float instad of integer, therefore, after they use it in an array that exception is trown. See more explanation here
这是因为 chrome 开始计算width并height作为整数的浮点数，因此，在它们在数组中使用它之后，异常被删除。在此处查看更多说明
Most probably you used a percentage for width/height of the container such as
很可能您使用了容器宽度/高度的百分比，例如
map_canvas1{
width: 100%;
height: 80%;
}
Now, try using pixels
现在，尝试使用像素
map_canvas1{
width: 500px;
height: 300px;
}
and see if it works.
看看它是否有效。
