Uncaught TypeError：无法读取null的属性'offsetWidth' [英] Uncaught TypeError: Cannot read property 'offsetWidth' of null

问题描述

所以这里是我的代码片段

 < html> 
< head> 
< meta name =viewportcontent =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 src =http://goessner.net/download/prj/jsonxml/xml2json.js>< / script> 
  - > 
< script type =text / javascriptsrc =https://maps.googleapis.com/maps/api/js?key=AIzaSyB1Wwh21ce7jnB6yDbjVGN3LC5ns7OoOL4&amp;sensor=false> 
< / script> 
 
< link rel =stylesheettype =text / csshref =bd_css> 
 
 <！ - 用于触发企业csv文件下载的javascript代码 - > 
< script type =text / javascript> 
函数populateIframe（id）
 {
 var ifrm = document.getElementById（id）; 
 ifrm.src =business_data_to_excel; 
} 
< / script> 
 
< script> 
 
 
 
函数showCategories（str）
 {
 if（window.XMLHttpRequest）
 {//代码为IE7 +，Firefox，Chrome ，Opera，Safari 
 xmlhttp = new XMLHttpRequest（）; 
} 
 else 
 {//代码为IE6，IE5 
 xmlhttp = new ActiveXObject（Microsoft.XMLHTTP）; 
} 
 xmlhttp.onreadystatechange = function（）
 {
 if（xmlhttp.readyState == 4&& xmlhttp.status == 200）
 {
 document.getElementById（txt）。innerHTML = xmlhttp.responseText; 
 
 
 //在这个bd_get_subcategories中，我们必须
 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] 
} ; 
 
函数移位器（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）
}; 
返回b 
} 
 
函数createMarker（b，c，d，e，f）{
 var g = google.maps; 
 var h =移位器（图标[e]）; 
 var i = new g.Marker（{
 position：b，
 map：map，
 title：c，
 clickable：true，
 draggable ：假，
图标：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 [一世]; 
 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（移位器（图标[a.category]））
} 
}; 
 var visible = {
 show：function（a）{
 for（var i = 0，m; m = gmarkers [i]; i ++）{
 if（m。 （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（）
} 
}; 
 
 boxclick（a，b）{
 if（a.checked）{
 visible.show（b）
} else {
 visible。隐藏（b）
} 
 makeSidebar（）
} 
 
函数triggerClick（i）{
 google.maps.event.trigger（gmarkers [i ]，click）
} 
 
函数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 + = + c +s< \ / b>< br \ />; 
b + ='< a id ='+ gmarkers [i] .id +'href =javascript：triggerClick（'+ i +'）onm​​ouseover =hover.over（'+ i +' ）onmouseout =hover.out（'+ i +'）>'+ gmarkers [i] .name +'< \ / a>< br \ />'; 
a = c 
} 
} 
 document.getElementById（sidebar）。innerHTML = b 
} 
 
函数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（）
} 
 
函数readData（）{
 var k; 
 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）
} 
可见.show（ 条）; 
 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>关键字
< input type =radio>两个
< / div>< / br> 
< div id =searchfor>搜寻：
< td>< input type =textmaxlength =30>< / td> 
< td>< input type =submitname =submit_queryvalue =Search>< / td> 
< iframe id =frame1style =display：none>< / iframe> 
< a href =javascript：populateIframe（'frame1'）>以Excel格式下载整个目录< / a> 
< / div>< / br> 
< div id ='cat_select'>类别：< select name ='users'onchange ='showCategories（this.value）'> 
<？php 
 $ query_select = ee（） - > db->查询（'SELECT DISTINCT category_name，cat_counter FROM stab_num_of_cat_subcat'）; 
 
 
 echo< option value =''>所有类别< / option>; 
 foreach（$ query_select-> result_array（）as $ row_value）{
 echo< option value ='。$ row_value ['category_name']。'>。$ row_value [ 'CATEGORY_NAME'] （ $ row_value [ 'cat_counter']。 ）< /选项> 中。 
} 
 
？> 
< / select>< / div> 
< / form>< / div> 
 
< div id =txt>子类别：< select disabled name =subcat_select>< option value ='>所有子类别< / option><选择>< / DIV>< / BR> 
< div id =map-canvasstyle =width：500px; height：380px;> 
< / body> 
< / html> 
  

基本上，当我尝试渲染地图时，我从xml文件中获取数据。

但是我收到错误Uncaught TypeError：无法读取属性'offsetWidth'为null，并且我的地图没有获得加载。

我的例子与 http：// www。 wolfpil.de/v3/toggle-cats.html

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

请帮我解决问题。

解决方案

  Uncaught TypeError ：无法读取null的属性'offsetWidth'
  

这是地图容器div id不匹配时的典型错误在地图构造函数中使用id。请参阅 jsbin示例。

I read couple of threads before posting this question unfortunately I could not find the suitable answers for my question .

So here is my code snippet

<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> 

Basically upon changing the categories I am trying to render the map I am getting the data from a xml file .

But I am getting the error "Uncaught TypeError: Cannot read property 'offsetWidth' of null" and my map is not getting load .

My example is exactly same as "http://www.wolfpil.de/v3/toggle-cats.html"

I don't know what might I am doing wrong here .

Please help me out .

解决方案

Uncaught TypeError: Cannot read property 'offsetWidth' of null

That is typical error when div id of map container is mismatched with id used in map constructor. See example at jsbin.

这篇关于Uncaught TypeError：无法读取null的属性'offsetWidth'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！