草庐IT

javascript - 未捕获的类型错误 : Cannot read property 'offsetWidth' of null

coder 2024-07-27 原文

<分区>

不幸的是，我在发布这个问题之前阅读了几个线程，我找不到适合我的问题的答案。

这是我的代码片段

<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
    <!--<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    <script src="http://goessner.net/download/prj/jsonxml/xml2json.js"></script>
    -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB1Wwh21ce7jnB6yDbjVGN3LC5ns7OoOL4&amp;sensor=false">
</script>

    <link rel="stylesheet" type="text/css" href="bd_css">

    <!-- javascript code for triggering the download for csv file of businesses-->
    <script type="text/javascript">
        function populateIframe(id) 
        {
            var ifrm = document.getElementById(id);
            ifrm.src = "business_data_to_excel";
        }
    </script>

    <script>



        function showCategories(str)
        {
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("txt").innerHTML=xmlhttp.responseText;
            }
          }
        // here within this bd_get_subcategories we have to 
        xmlhttp.open("GET","bd_get_subcategories?q="+str,true);
        xmlhttp.send();
        loadMap(str);
        }

    </script>
<!--               Rohit Script ---------------------->
<script type="text/javascript">

var map, actual, iw;
var gmarkers = [];
var icons = {
    img: "http://sites.google.com/site/mxamples/icons-dot.png",
    bar: [0, 0],
    cafe: [128, 32],
    hotel: [32, 32],
    disco: [96, 0],
    white: [192, 0]
};

function shifter(a) {
    var g = google.maps;
    var b = {
        url: icons.img,
        size: new g.Size(32, 32),
        origin: new g.Point(a[0], a[1]),
        anchor: new g.Point(15, 32)
    };
    return b
}

function createMarker(b, c, d, e, f) {
    var g = google.maps;
    var h = shifter(icons[e]);
    var i = new g.Marker({
        position: b,
        map: map,
        title: c,
        clickable: true,
        draggable: false,
        icon: h
    });
    i.category = e;
    i.name = c;
    i.id = f;
    gmarkers.push(i);
    var j = "<b>" + c + "<\/b><p>" + d + "<\/p>";
    g.event.addListener(i, "click", function () {
        iw.setContent(j);
        iw.open(map, this)
    });
    g.event.addListener(i, "mouseover", function () {
        i.setIcon(shifter(icons.white));
        var a = document.getElementById(f);
        if (a) {
            a.className = "focus";
            actual = a
        }
    });
    g.event.addListener(i, "mouseout", function () {
        i.setIcon(shifter(icons[e]));
        if (actual) {
            actual.className = "normal"
        }
    })
}
var hover = {
    over: function (i) {
        var a = gmarkers[i];
        var b = document.getElementById(a.id);
        b.className = "focus";
        a.setIcon(shifter(icons.white))
    },
    out: function (i) {
        var a = gmarkers[i];
        var b = document.getElementById(a.id);
        b.className = "normal";
        a.setIcon(shifter(icons[a.category]))
    }
};
var visible = {
    show: function (a) {
        for (var i = 0, m; m = gmarkers[i]; i++) {
            if (m.category == a) {
                m.setVisible(true)
            }
        }
        document.getElementById(a).checked = true
    },
    hide: function (a) {
        for (var i = 0, m; m = gmarkers[i]; i++) {
            if (m.category == a) {
                m.setVisible(false)
            }
        }
        document.getElementById(a).checked = false;
        iw.close()
    }
};

function boxclick(a, b) {
    if (a.checked) {
        visible.show(b)
    } else {
        visible.hide(b)
    }
    makeSidebar()
}

function triggerClick(i) {
    google.maps.event.trigger(gmarkers[i], "click")
}

function makeSidebar() {
    var a;
    var b = "";
    for (var i = 0, m; m = gmarkers[i]; i++) {
        if (m.getVisible()) {
            var c = gmarkers[i].category;
            c = c.replace(/^./, c.charAt(0).toUpperCase());
            if (a != c) b += "<b>" + c + "s<\/b><br \/>";
            b += '<a id="' + gmarkers[i].id + '" href="javascript:triggerClick(' + i + ')" onmouseover="hover.over(' + i + ')" onmouseout="hover.out(' + i + ')">' + gmarkers[i].name + '<\/a><br \/>';
            a = c
        }
    }
    document.getElementById("sidebar").innerHTML = b
}

function loadMap() {
    var g = google.maps;
    var a = {
        center: new g.LatLng(48.139543, 11.571436),
        zoom: 14,
        mapTypeId: g.MapTypeId.ROADMAP,
        mapTypeControlOptions: {
            mapTypeIds: [g.MapTypeId.ROADMAP, g.MapTypeId.SATELLITE, g.MapTypeId.HYBRID]
        },
        panControl: true,
        zoomControl: true
    };
    map = new g.Map(document.getElementById("map"), a);
    iw = new g.InfoWindow();
    g.event.addListener(map, "click", function () {
        if (iw) iw.close()
    });
    readData()
}

function readData() {
    var k;
    try {
        if (typeof ActiveXObject != "undefined") {
            k = new ActiveXObject("Microsoft.XMLHTTP")
        } else if (window["XMLHttpRequest"]) {
            k = new XMLHttpRequest()
        }
    } catch (e) {}
    k.open("GET", "marker_info_to_xml?p=bar", true);
    k.onreadystatechange = function () {
        if (k.readyState == 4) {
            var a = k.responseXML;
            var b = a.documentElement.getElementsByTagName("marker");
            for (var i = 0, m; m = b[i]; i++) {
                var c = parseFloat(m.getAttribute("lat"));
                var d = parseFloat(m.getAttribute("lng"));
                var e = new google.maps.LatLng(c, d);
                var f = m.getAttribute("address");
                var g = m.getAttribute("nr");
                var h = m.getAttribute("name");
                var j = m.getAttribute("category");
                createMarker(e, h, f, j, g)
            }
            if (gmarkers) {
                gmarkers.sort(compareCats)
            }
            visible.show("bar");
            visible.show("cafe");
            visible.hide("hotel");
            visible.hide("disco");
            makeSidebar()
        }
    };
    k.send(null)
}
var compareCats = function (a, b) {
    var c = a.name;
    c = c.toLowerCase();
    c = c.replace(/ä/g, "a");
    c = c.replace(/ö/g, "o");
    c = c.replace(/ü/g, "u");
    c = c.replace(/ß/g, "s");
    var d = b.name;
    d = d.toLowerCase();
    d = d.replace(/ä/g, "a");
    d = d.replace(/ö/g, "o");
    d = d.replace(/ü/g, "u");
    d = d.replace(/ß/g, "s");
    var e = a.category;
    var f = b.category;
    if (a.category == b.category) {
        if (a.name == b.name) {
            return 0
        }
        return (a.name < b.name) ? -1 : 1
    }
    return (a.category < b.category) ? -1 : 1
};
//window.onload = loadMap;
google.maps.event.addDomListener(window, "load", loadMap);

</script>

<!--               Rohit SCript end -------------------->



    </head>
    <body>
    <div id="business_form"><form action= "">
        <div id='radiobtn'>Search By:
            <input type="radio">Title
            <input type="radio">Keywords
            <input type="radio">Both
        </div></br>
        <div id="searchfor">Search For:
            <td><input type="text" maxlength="30"></td>
            <td><input type="submit" name="submit_query" value="Search"></td>
            <iframe id="frame1" style="display:none"></iframe>
            <a href="javascript:populateIframe('frame1')">Download entire directory in Excel format</a>
        </div></br>
        <div id='cat_select'>Catgories:<select name='users' onchange='showCategories(this.value)'>
        <?php
          $query_select = ee()->db->query('SELECT DISTINCT category_name,cat_counter FROM stab_num_of_cat_subcat');


        echo "<option value=''>All Categories</option>";
        foreach($query_select->result_array() as $row_value){
            echo "<option value='".$row_value['category_name']."'>".$row_value['category_name']."(".$row_value['cat_counter'].")</option>";
        }

        ?>
        </select></div>
    </form></div>

    <div id="txt">Sub Categories:<select disabled name="subcat_select"><option value=''>All Subcategories</option></select></div></br>
    <div id="map-canvas" style="width:500px;height:380px;">
</body>
</html>

基本上，在更改类别后，我尝试渲染 map ，我从 xml 文件获取数据。

但我收到错误“Uncaught TypeError: Cannot read property 'offsetWidth' of null”并且我的 map 没有加载。

我的例子和“http://www.wolfpil.de/v3/toggle-cats.html”一模一样

我不知道我在这里做错了什么。

请帮帮我。

offsetWidthjavascript34gtltjquerygoogle-mapsgoogle-maps-api-3

有关javascript - 未捕获的类型错误 : Cannot read property 'offsetWidth' of null的更多相关文章

  1. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

  2. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  3. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  4. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  5. ruby - 在 jRuby 中使用 'fork' 生成进程的替代方案？ - 2

    在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',

  6. ruby - 主要 :Object when running build from sublime 的未定义方法 `require_relative' - 2

    我已经从我的命令行中获得了一切，所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时，我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗？我正在使用OSX并安装了rvm。 最佳答案 或者，您可以只使用“require”，它应该可以正常工作。我认为“require_relative”仅适用于ruby​​1.9+ 关于ruby-主要:Objectwhenrun

  7. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

    我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

  8. ruby - Infinity 和 NaN 的类型是什么？ - 2

    我可以得到Infinity和NaNn=9.0/0#=>Infinityn.class#=>Floatm=0/0.0#=>NaNm.class#=>Float但是当我想直接访问Infinity或NaN时:Infinity#=>uninitializedconstantInfinity(NameError)NaN#=>uninitializedconstantNaN(NameError)什么是Infinity和NaN？它们是对象、关键字还是其他东西？ 最佳答案 您看到打印为Infinity和NaN的只是Float类的两个特殊实例的字符串

  9. ruby - 检查方法参数的类型 - 2

    我不确定传递给方法的对象的类型是否正确。我可能会将一个字符串传递给一个只能处理整数的函数。某种运行时保证怎么样？我看不到比以下更好的选择:defsomeFixNumMangler(input)raise"wrongtype:integerrequired"unlessinput.class==FixNumother_stuffend有更好的选择吗？ 最佳答案 使用Kernel#Integer在使用之前转换输入的方法。当无法以任何合理的方式将输入转换为整数时，它将引发ArgumentError。defmy_method(number)

  10. ruby-on-rails - 新 Rails 项目 : 'bundle install' can't install rails in gemfile - 2

    我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="

随机推荐