Question

目前正在使用Jquery Mobile构建基本业务目录。我正在构建它作为一个Web应用程序，计划使用PhoneGap将其移植到iOS和Android。该应用程序使用JSON数据作为其数据源。

该应用正在为每个视图使用单独的.html页面。基本导航结构如下：分类 - ＆gt;企业 - ＆gt;商业信息

在“商家信息”页面上（因此深入3页），我想显示所有特定的商家信息，以及与该商家的图钉集成的Google Map。我首先构建了没有Jquery Mobile的应用程序，一切都运行良好，所有信息与正确的地图一起显示。实现Jquery Mobile后，出现了问题。

最初我的代码包含在函数initialize（）{}中，它在我的document.getElementById（）。innerHTML行之后结束。我的业务信息和我的地图都没有像Jquery Mobile实施之前那样显示。我从代码中删除了函数initialize（）{}，并在其中完整地注释了我的Google地图实施部分，我的商家信息正确显示。

CSS正在推动我的地图，我不认为这是我的问题的根源。我对此的体验充其量是有限的，所以希望有人能够指出我的代码中明显的错误或结构。它可能是一个DOM问题，但我自己无法识别它。有什么想法吗？在此先感谢您的帮助/意见。

// Read our the JSON data from source .php file

var xmlhttp = new XMLHttpRequest();
var url = "http://nsccpros.com/Directory_Test_App/get_Businesses_Json.php";

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var myArr = JSON.parse(xmlhttp.responseText);
        myFunction(myArr);
    }
}

xmlhttp.open("GET", url, true);
xmlhttp.send();

var urlParameter = idStorageObject.b_id; 

// Var to hold google map coordinates

var mapLat;
var mapLon;

function myFunction(arr) {           // Checks if URL parameter matches a business ID from database (b_id)
    var out = "";                // Main output markup
    var panel_output = "";      // Panel markup
    var i;
    var mapTest = "";

    var panel_setup = "<div data-role=\"main\" class=\"ui-content\"><h3>View Business Info</h3><a href=\"#myPanel\" class=\"ui-btn ui-btn-inline ui-corner-all ui-shadow\">Click Me!</a></div>";     // Additional Business Info Panel


    for(i = 0; i < arr.length; i++) {

        if (arr[i].b_id == urlParameter) {

            // ****** Business info output details ********

            out += "<div align='center'><div id='business_name'>" + arr[i].name + "</div></div>";   // Extra div tag which centers the business name

            out += "<table class='business_details'>";    // Create the table to hold business details

            out += "<tr><td class='photo' colspan = '3'><img class='business_image' src='images/" + arr[i].image + "'></td>";

            // Hours table (table within a table)
            out += "<td><table id='hours_table'><tr><th colspan='3'>Hours</th></tr>";
            out += "<tr><td class='day'>Mon</td><td class='hours_s'>" + arr[i].mon_start + "  - </td><td class='hours_c'>" + arr[i].mon_close +"</td></tr>";
            out += "<tr><td class='day'>Tue</td><td class='hours_s'>" + arr[i].tue_start + "  - </td><td class='hours_c'>" + arr[i].tue_close +"</td></tr>";
            out += "<tr><td class='day'>Wed</td><td class='hours_s'>" + arr[i].wed_start + "  - </td><td class='hours_c'>" + arr[i].wed_close +"</td></tr>";
            out += "<tr><td class='day'>Thu</td><td class='hours_s'>" + arr[i].thu_start + "  - </td><td class='hours_c'>" + arr[i].thu_close +"</td></tr>";
            out += "<tr><td class='day'>Fri</td><td class='hours_s'>" + arr[i].fri_start + "  - </td><td class='hours_c'>" + arr[i].fri_close +"</td></tr>";
            out += "<tr><td class='day'>Sat</td><td class='hours_s'>" + arr[i].sat_start + "  - </td><td class='hours_c'>" + arr[i].sat_close +"</td></tr>";
            out += "<tr><td class='day'>Sun</td><td class='hours_s'>" + arr[i].sun_start + "  - </td><td class='hours_c'>" + arr[i].sun_close +"</td></tr>";
            out += "</table></td></tr>";

            // Social media links
            out += "<tr><td><a href='" + arr[i].fb_link + "'><img class='social_icon' src='icons/fb.png'></a></td>";    // FB link
            out += "<td><a href='" + arr[i].twitter_link + "'><img class='social_icon' src='icons/twitter.png'></a></td>";   // Twitter link
            out += "<td><a href='" + arr[i].social3_link + "'><img class='social_icon' src='icons/pinterest.png'></a></td>";  // Social 3 link

            // Address info
            out += "<tr><td colspan = '3' class='address'>" + arr[i].street + "<br>" + arr[i].postal_code + "<br>" + arr[i].phone + "<br></td>";

            // Panel button
            out += "<td align='right' colspan = '2'>" + panel_setup + "</td></tr>";
            panel_output += "<p>" + arr[i].servicesP1 + "</p><p>" + arr[i].servicesP2 + "</p><p>" + arr[i].servicesP3 + "</p>";

            out += "</table>";

            // ---------------------------- End business info output details --------------------------------

            // ****Google maps implementation******

            // Assign latitude and longitude values

            mapLat = arr[i].mapLat;
            mapLon = arr[i].mapLon;

            // Configure google map options

            var pinLocation = new google.maps.LatLng(Number(mapLat),Number(mapLon));

            var mapProp = {
              center: pinLocation,  // Must cast the lat and lon values to number
              zoom:15,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);  // Draw the map

            // Draw the map pin on the map


            var startPosition = new google.maps.Marker({    // Create a new marker
            position: pinLocation,                        // Set its position
            map: map,                                // Specify the map
            icon: "images/pin.png"                            // Path to image from HTML
          }); 

    // ----------------- End Google Maps Implementation -------------------------------------------------

    // Output all business and map data

}}

    document.getElementById("businessDetails").innerHTML = out;
    document.getElementById("panel_output").innerHTML = panel_output;

}

function loadScript() // Adds a script tag to html header to load google map API on load
{
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?key=&sensor=false&callback=initialize";
  document.body.appendChild(script);
}

window.onload = loadScript;

谷歌地图＆amp; Jquery Mobile - 地图未显示

0 个答案: