jjzjj

javascript - 未捕获的 RangeError : Invalid array length in Chrome version 36. 0.1985.5 dev -m

coder 2025-03-16 原文

我有一个谷歌地图 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 开始将 widthheight 计算为整数而不是 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/

有关javascript - 未捕获的 RangeError : Invalid array length in Chrome version 36. 0.1985.5 dev -m的更多相关文章

  1. ruby - 如何让Ruby捕获线程中的语法错误 - 2

    我正在尝试使用ruby​​编写一个双线程客户端,一个线程从套接字读取数据并将其打印出来,另一个线程读取本地数据并将其发送到远程服务器。我发现的问题是Ruby似乎无法捕获线程内的错误,这是一个示例:#!/usr/bin/rubyThread.new{loop{$stdout.puts"hi"abc.putsefsleep1}}loop{sleep1}显然,如果我在线程外键入abc.putsef,代码将永远不会运行,因为Ruby将报告“undefinedvariableabc”。但是,如果它在一个线程内,则没有错误报告。我的问题是,如何让Ruby捕获这样的错误?或者至少,报告线程中的错误?

  2. ruby-on-rails - 无法在 Rails 助手中捕获 block 的输出 - 2

    我在使用自定义RailsFormBuilder时遇到了问题,从昨天晚上开始我就发疯了。基本上我想对我的构建器方法之一有一个可选block,以便我可以在我的主要content_tag中显示其他内容。:defform_field(method,&block)content_tag(:div,class:'field')doconcatlabel(method,"Label#{method}")concattext_field(method)capture(&block)ifblock_given?endend当我在我的一个Slim模板中调用该方法时,如下所示:=f.form_field:e

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. ruby - 在 ruby​​ 中生成一个进程,捕获 stdout,stderr,获取退出状态 - 2

    我想从ruby​​rake脚本运行一个可执行文件,比如foo.exe我希望将foo.exe的STDOUT和STDERR输出直接写入我正在运行rake任务的控制台.当进程完成时,我想将退出代码捕获到一个变量中。我如何实现这一目标?我一直在玩backticks、process.spawn、system但我无法获得我想要的所有行为,只有部分更新:我在Windows上,在标准命令提示符下,而不是cygwin 最佳答案 system获取您想要的STDOUT行为。它还返回true作为零退出代码,这可能很有用。$?填充了有关最后一次system调

  5. ruby - 捕获 Ruby Logger 输出以进行测试 - 2

    我有一个像这样的ruby​​类:require'logger'classTdefdo_somethinglog=Logger.new(STDERR)log.info("Hereisaninfomessage")endend测试脚本行如下:#!/usr/bin/envrubygem"minitest"require'minitest/autorun'require_relative't'classTestMailProcessorClasses当我运行这个测试时,out和err都是空字符串。我看到消息打印在stderr上(在终端上)。有没有办法让Logger和capture_io一起玩得

  6. ruby - Capistrano 中的执行、测试和捕获命令有什么区别? - 2

    关于SSHkit-Github它说:Allbackendssupporttheexecute(*args),test(*args)&capture(*args)来自SSHkit-Rubydoc,我明白execute实际上是test的别名?test之间有什么区别?,execute,capture在Capistrano/SSHKit中我应该什么时候使用? 最佳答案 执行只是执行命令。使用非0退出引发错误。测试方法的行为与execute完全相同,但是它返回bool值(true如果命令以0退出,而false否则)。它通常用于控制任务中的流程

  7. ruby - 如何捕获 ruby​​ 中的所有异常? - 2

    我们如何捕获或/和处理ruby​​中所有未处理的异常?例如,这样做的动机可能是将某种异常记录到不同的文件或发送电子邮件给系统管理。在Java中我们会做Thread.setDefaultUncaughtExceptionHandler(UncaughtExceptionHandlerex);在Node.js中process.on('uncaughtException',function(error){/*code*/});在PHP中register_shutdown_function('errorHandler');functionerrorHandler(){$error=error_

  8. ruby - 正则表达式 - 保存重复捕获的组 - 2

    这就是我做的a="%span.rockets#diamonds.ribbons.forever"a=a.match(/(^\%\w+)([\.|\#]\w+)+/)putsa.inspect这是我得到的#这就是我想要的#帮助?我尝试过但失败了:( 最佳答案 通常,您不能获得任意数量的捕获组,但如果您使用扫描,您可以为您想要捕获的每个标记获得一个匹配:a="%span.rockets#diamonds.ribbons.forever"a=a.scan(/^%\w+|\G[.|#]\w+/)putsa.inspect["%span","

  9. ruby - 如何捕获所有 HTTP 流量(本地代理) - 2

    我希望访问我机器上的所有HTTP流量(我的Windows机器-不是服务器)。据我了解,拥有一个本地代理是所有流量路线的必经之路。我一直在谷歌搜索但未能找到任何资源(关于Ruby)来帮助我。非常感谢任何提示或链接。 最佳答案 WEBrick中有一个HTTP代理(Rubystdlib的一部分)和here's一个实现示例。如果你喜欢生活在边缘,还有em-proxy伊利亚·格里戈里克。这postIlya暗示它似乎确实需要一些调整来解决您的问题。 关于ruby-如何捕获所有HTTP流量(本地代理)

  10. ruby-on-rails - Ruby 从 bash 脚本执行中捕获 stderr 输出 - 2

    我目前可以将stdout重定向到ruby​​/rails中的字符串变量,只需在bash中运行命令并将结果设置为我的字符串变量,如下所示。val=%x[#{cmd}]其中cmd是表示bash命令的字符串。但是,这仅捕获stdout,因为我想捕获stderr并将其设置为ruby​​中的字符串——有什么想法吗? 最佳答案 简单地重定向它:val=%x[#{cmd}2>&1]如果您只想从stderr捕获输出,请在将其复制到fd2后关闭stdout的文件描述符。val=%x[#{cmd}2>&1>/dev/null]

随机推荐