我有一个谷歌地图 API 设置 Here ，并且只有 Google Chrome 会抛出“未捕获的 RangeError:无效的数组长度”。
这里是有问题的代码:
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);
它似乎加载了除我设置的图标和自定义按钮之外的所有内容。 map 将正常工作，可通过双击拖动和滚动，但整个 UI 是隐藏的。
此代码在早期版本的 Chrome 中运行良好，但无论出于何种原因，此新更新已将代码搞乱。
最佳答案
问题不在于您的代码。这是 google maps api/chrome 中的错误。
问题来了:如果你尝试定义一个整数数组，不会有问题
var arr = Array(50);
但是，如果你定义一个带有 float 的数组，你会得到这个错误
var arr = Array(50.5);//=> 未捕获的 RangeError:无效的数组长度
这是因为 chrome 开始将 width 和 height 计算为整数而不是 float ，因此，当他们在数组中使用它时，就会抛出异常。查看更多说明here
很可能你使用了容器宽度/高度的百分比，例如
map_canvas1{
width: 100%;
height: 80%;
}
现在，尝试使用像素
map_canvas1{
width: 500px;
height: 300px;
}
看看它是否有效。
关于javascript - 未捕获的 RangeError : Invalid array length in Chrome version 36. 0.1985.5 dev -m，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23702115/