使用javascript

Question

我有一个网站可以从MySQL数据库中获取位置，并将其作为JSON对象传递给JavaScript函数。 JavaScript函数为从数据库返回的每一行动态创建表。返回的每个位置对象都包含纬度和经度，我想为每个对象创建一个Google地图。我可以使用从数据库返回的数据在页面上成功创建1个地图但是当我将地图创建代码添加到构建表的循环时，它开始抛出此错误：

TypeError: Cannot read property 'offsetWidth' of null

我已经解决了人们发布的有关此错误的其他问题。它可能具有的两个原因是（1）我试图添加地图的<div>不存在，或者（2）我试图在创建之前显示地图。我知道<div>存在，因为它们在显示时存在于页面中。我不确定如何检查或解决其他问题。

这是我检索数据并构建表格的JavaScript：

google.maps.event.addDomListener(window, "load");

//THIS FUNCTIONS BUILD THE MAPS
//PASS LAT, LONG, AND ID FOR DIV
function initializeMap(latitude,longitude, mapID) 
{
    var myCenter = new google.maps.LatLng(latitude, longitude);
     var mapProp = 
     {
      center:myCenter,
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP

     };
     var map=new google.maps.Map(document.getElementById(mapID), mapProp);

    var marker=new google.maps.Marker({
      position:myCenter,
      });

    marker.setMap(map);
}

function removeTable()
{
    $("#tableID").remove();
}

/*
    ajaxRequest variable receives and parses a JSON object into a 2 dimensional array
    an example of what a single row returned will look like: [["2","Alexandra","33 GRANT STREET","ALEXANDRA","3714","57721040","-37.18859863281250000000","145.70799255371094000000","","security"]]
    when trying to access elements in the array using a loop, columns are as follows:
    ajaxRequest[i][0] = database id
    ajaxRequest[i][1] = name
    ajaxRequest[i][2] = address
    ajaxRequest[i][3] = suburb
    ajaxRequest[i][4] = postcode
    ajaxRequest[i][5] = phone
    ajaxRequest[i][6] = latitude
    ajaxRequest[i][7] = longitude
    ajaxRequest[i][8] = description
    ajaxRequest[i][9] = service_type
*/
function search(option)
{
   var ajaxRequest;

   try{
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   }catch (e){
      // Internet Explorer Browsers
      try{
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      }catch (e) {
         try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         }catch (e){
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
   }

   /*
   1 = unsafe
   2 = depressed
   3 = sad
   */
   if(option == 1)
   {ajaxRequest.open("GET", "securitymodel.php", true);}
   if(option == 2)
   {ajaxRequest.open("GET", "depressedModel.php", true);}    
   if(option == 3)
   {ajaxRequest.open("GET", "sadmodel.php", true);} 
    ajaxRequest.send(null); 

   // Create a function that will receive data
   // sent from the server and will update
   // div section in the same page.
   var ajaxResult = 1;

   ajaxRequest.onreadystatechange = function()
   {
      if(ajaxRequest.readyState == 4)
      {
         var ajaxDisplay = document.getElementById('ajaxDiv');
            //ajaxDisplay.innerHTML = ajaxRequest.responseText;
            ajaxResult = JSON.parse(ajaxRequest.responseText);

            if(ajaxResult.length > 0)
        {
        //IF SOMETHING IS RETURNED BEGIN BUILDING THE TABLE
            var tableLocation = document.getElementById('suggestionTable');

            var tableArea = document.createElement('table');
            tableArea.id = 'tableID';       

            for(var i = 0; i < ajaxResult.length; i++)
            {       //create inner row 
                var innerRow = document.createElement('tr');
                var innerTD = document.createElement('td');

                //WE MUST GO DEEPER!!!
                var innerTable = document.createElement('table');
                var superInnerTD = document.createElement('td');
                var secondSuperInnerTD = document.createElement('td');

                //row 1
                var nameTR = document.createElement('tr');
                var nameHead = document.createElement('td');
                var name = document.createTextNode('Name:');
                nameHead.appendChild(name);
                nameTR.appendChild(nameHead);

                var nameTD = document.createElement('td');
                var nameText = document.createTextNode(ajaxResult[i][1]);
                nameTD.appendChild(nameText);
                nameTR.appendChild(nameTD);
                superInnerTD.appendChild(nameTR);

                //row 2
                var descTR = document.createElement('tr');          
                var descHead = document.createElement('td');
                var desc = document.createTextNode('Description:');
                descHead.appendChild(desc);
                descTR.appendChild(descHead);

                var descTD = document.createElement('td');
                var descText = document.createTextNode(ajaxResult[i][8]);
                descTD.appendChild(descText);
                descTR.appendChild(descTD);
                superInnerTD.appendChild(descTR);

                //row 3
                var addTR = document.createElement('tr');   
                var addressHead = document.createElement('td');
                var address = document.createTextNode('Address:');
                addressHead.appendChild(address);
                addTR.appendChild(addressHead);

                var addTD = document.createElement('td');
                var addressText = document.createTextNode(ajaxResult[i][2]);
                addTD.appendChild(addressText);
                addTR.appendChild(addTD);
                superInnerTD.appendChild(addTR);

                //row 4
                var subTR = document.createElement('tr');
                var suburbHead = document.createElement('td');
                var suburb = document.createTextNode('Suburb:');
                suburbHead.appendChild(suburb);
                subTR.appendChild(suburbHead);

                var subTD = document.createElement('td');
                var subText = document.createTextNode(ajaxResult[i][3]);
                subTD.appendChild(subText);
                subTR.appendChild(subTD);
                superInnerTD.appendChild(subTR);

                //row 5
                var postTR = document.createElement('tr');
                var postcodeHead = document.createElement('td');
                var postcode = document.createTextNode('Postcode:');
                postcodeHead.appendChild(postcode);
                postTR.appendChild(postcodeHead);

                var postTD = document.createElement('td');
                var postText = document.createTextNode(ajaxResult[i][4]);
                postTD.appendChild(postText);
                postTR.appendChild(postTD);
                superInnerTD.appendChild(postTR);

                //row 6
                var phoneTR = document.createElement('tr');
                var phoneHead = document.createElement('td');
                var phone = document.createTextNode('Phone:');
                phoneHead.appendChild(phone);
                phoneTR.appendChild(phoneHead);

                var phoneTD = document.createElement('td'); 
                var phoneText = document.createTextNode(ajaxResult[i][5]);
                phoneTD.appendChild(phoneText); 
                phoneTR.appendChild(phoneTD);
                superInnerTD.appendChild(phoneTR);

                //The divContainer requires an id
                //ID IS AUTOMATICALLY GENERATED BY CONACTENATING THE NAME AND ADDRESS TOGETHER
                var mapID = ajaxResult[i][1]+ajaxResult[i][2];
                var divContainer =  document.createElement("div");
                divContainer.setAttribute("id", mapID);
                secondSuperInnerTD.appendChild(divContainer);

                initializeMap(ajaxResult[i][6],ajaxResult[i][7],mapID); 

                innerTable.appendChild(superInnerTD);
                innerTable.appendChild(secondSuperInnerTD);             

                innerTD.appendChild(innerTable);
                innerRow.appendChild(innerTD);

                tableArea.appendChild(innerRow);

            }
            tableLocation.appendChild(tableArea);
        }
      }
   }
}

完成的表的示例如下所示：

我们希望将地图放在右侧的<td>。

重申一下，当我们尝试在页面上用html编码的<div>中构建1个地图时，地图生成就会起作用。当我们尝试在动态创建的<div>内创建多个映射时，它会失败。

Answer 1

初始化地图的调用发生在将div添加到DOM之前。

initializeMap(ajaxResult[i][6],ajaxResult[i][7],mapID); 

在以下行之前调用上述行：

tableLocation.appendChild(tableArea);

执行此行时，动态创建的地图div将添加到页面中。因此，您将收到错误。

一种解决方法是使用settimeout，以便在将map div添加到DOM之后调用initialize函数。

setTimeout(function(){  initializeMap(ajaxResult[i][6],ajaxResult[i][7],mapID); }, 500);  

另一种选择是将数据推入数组并在tableLocation.appendChild（tableArea）之后迭代该数组; line然后使用该数据调用intializeMap函数