Javascript 谷歌地图API-带控件的灰色地图

我已经查看了可能与我的问题有关的其他问题/答案，但似乎没有人回答

问题：加载和放置标记时，地图显示为“冻结”，变为灰色，但仍显示控件。标记加载在地图的左上角

虽然我不能提供一个小提琴的这一点，暂时的故障可以观察到（链接删除）。单击“路径一”（在顶部菜单中，在地图最初加载后），您将看到该行为。若要查看正确的行为，请转到（链接已删除），然后单击“路径二”。由于应用程序功能更改待定，我必须切换到我正在为路径一执行的操作

我不确定这是否与获取映射数据的异步GET调用有关（我并不声称自己是Javascript专家）

谢谢你的帮助

谢谢

poemmap.js：

// contains the currently plotted markers
var myMarkers = Array();
// contains the path data
var myPath = Array();
// holds the poem text
var poemHTML = "";
// the map canvas
var map;
//var src = 'geodata/Westbury.kml';
//var src = 'geodata/poems1.kml';

// the current poem index (zero-based)
var currentPoem;

function initialize() {
    var mapCanvas = document.getElementById('poemMap');
    var mapOptions = {
        center: new google.maps.LatLng(51.258476, -2.184906),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
    map = new google.maps.Map(mapCanvas, mapOptions);
    //loadKmlLayer(src, map);
}

/*function loadKmlLayer(src, map) {
    var kmlLayer = new google.maps.KmlLayer(src, {
      suppressInfoWindows: true,
      preserveViewport: false,
      map: map
    });
    google.maps.event.addListener(kmlLayer, 'click', function(event) {
      var content = event.featureData.infoWindowHtml;
      //var poem = document.getElementById('thePoem');
      //poem.innerHTML = content;
      $.get(content).success(function(data) {
             $('#thePoem.content').html(data);
      }); 
      $('#poemText').foundation('open');
    });
  }*/

function shufflePath() {
  var currentIndex = myPath.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = myPath[currentIndex];
    myPath[currentIndex] = myPath[randomIndex];
    myPath[randomIndex] = temporaryValue;
  }
}

function fetchPathPoemData(thePath) {
    // define the start id and the ending 
    // id for the specific path
    var start = 0;
    var end = 1;
    // temporary data structure to contain 
    // the XML data from the file
    var tempPath;


    switch (thePath) {
        case 1: start = 1; end = 16; break;
        case 2: start = 17; end = 36; break;
        case 3: start = 37; end = 53; break;
        case 4: start = 54; end = 75; break;
        case 5: start = 1; end =75; break;
    }

    // read in the XML file that contains the basic poem data
    $.ajax({
        type: "GET",
        url: "geodata/poems.xml",
        dataType: "xml",
        contentType: "text/xml",
        async: true,
        error: function(xhr, statusText) { alert("Error: "+statusText + "\n\n" + xhr.responseText); },
        success: function(data){ 
            parsePoemXML(data, start, end);
            if (thePath == 5) {
                // shuffle the data
                shufflePath();
            }
            loadMap(0, 1);
         }
    });
}

function parsePoemXML(data, start, end) {
    $(data).find('poem').each(function(){
        var $poem = $(this); 
        var id = $poem.attr("id");
        var path = $poem.attr("path");
        var longitude = $poem.find("longitude").text();
        var latitude = $poem.find("latitude").text();
        var title = $poem.find("title").text();
        var file = $poem.find("file").text();
        var tempPath = new Array();
        tempPath.id = id;
        tempPath.path = path;
        tempPath.longitude = longitude;
        tempPath.latitude = latitude;
        tempPath.title = title;
        tempPath.file = file;
        if (id >= start && id <= end) {
            myPath.push(tempPath);
        }
     });
}

function initPoemPathArray(whichPath) {
    // clear the myPath array
    myPath.length = 0;
    // load in the data
    fetchPathPoemData(whichPath);
}

function loadMap(poemIndex, thePath) {
    var marker;
    var bAdd = true;
    var finalCoords;

    var lat = myPath[poemIndex].latitude;
    var lng = myPath[poemIndex].longitude;
    var sTitle = myPath[poemIndex].title;
    var sPoem = myPath[poemIndex].file;

    // zoom out
    //map.setZoom(12);

    setTimeout(function() {

        // check to see if marker exists
        // if not, add it, otherwise
        // just get the coords

        for( i = 0; i < myMarkers.length; i++ ) {
            if (myMarkers[i].poemUrl == sPoem) {
                bAdd = false;
                finalCoords = myMarkers[i].getPosition();
                marker = myMarkers[i];
                break;
            }
        }

        if(bAdd == true) {
            // set new coords
            var finalLat = lat + ((Math.random() - .5) / 1200);
            var finalLng = lng + ((Math.random() - .5) / 1200);
            var coords = new google.maps.LatLng(finalLat,finalLng);

            // load marker
            marker = new google.maps.Marker({
                position: coords,
                title: sTitle,
                //label: sLabel,
                draggable: false,
                //icon: "http://maps.gstatic.com/mapfiles/ms2/micons/blue-dot.png",
                animation: google.maps.Animation.DROP,
                map: map/*,
                poemUrl: sPoem*/
            });
            marker.info = new google.maps.InfoWindow({
              content: sTitle
            });
            marker.info.open(map, marker);
            myMarkers.push(marker);
            finalCoords = coords;
            google.maps.event.addListener(marker, 'click', function(event) {
                marker.info.open(map, marker);
                loadPoem(poemIndex, thePath, 0);
            });
        }
        // zoom in & center
        map.setCenter(finalCoords);
        map.setZoom(18);
        setTimeout(function() { 
            loadPoem(poemIndex, thePath, 2000);
        }, 2000);
    }, 0);

}

function loadPoem(poemIndex, thePath, waitTime) {
    var file = myPath[poemIndex].file;
    $.ajax({
        type: "GET",
        url: file,
        dataType: "html",
        async: true,
        error: function(xhr, statusText) { alert("Error: "+statusText + "\n\n" + xhr.responseText); },
        success: function(data){ 
            poemHTML = parsePoemFile(data, poemIndex, thePath);
            $("#thePoem").html(poemHTML);
            setTimeout(function() { $('#poemText').foundation('open'); }, waitTime);
         }
    });
}

function parsePoemFile(data, poemIndex, thePath) {
    // the poem itself, plus goodies, but not footer info
    // as that is built below
    var html = data + "<br><div id='poemFooter'>";
    // previous link text
    var pLinkBefore = "<a id='prevPoem' class='", pLinkAfter = "' href='#'>Previous Poem</a>"; 
    // next link text
    var nLinkBefore = "<a id='nextPoem' class='", nLinkAfter = "' href='#'>Next Poem</a>";
    // first link text
    var fLinkBefore = "<a id='nextPoem' class='", fLinkAfter = "' href='#'>First Poem</a>";
    // next path link text
    var zLinkBefore = "This is the end of Path ", zLinkMiddle = ".  To begin Path ", zLinkAfter = ", click <a href='#' id='nextPath'>here</a>";
    var zLinkFinal = "You have reached the end of all the paths.";
    var zLinkFinal2 = "You have reached the end of the random path.";
    // middle stuff
    var filler = "&nbsp;&nbsp;|&nbsp;&nbsp;";
    // color of the anchors
    var aColor;
    var zLinkIDFirst, zLinkIDSecond;
    switch (thePath) {
        case 1: aColor = "blueAnchors"; zLinkIDFirst = "One"; zLinkIDSecond = "Two"; break;
        case 2: aColor = "orangeAnchors"; zLinkIDFirst = "Two"; zLinkIDSecond = "Three"; break;
        case 3: aColor = "greenAnchors"; zLinkIDFirst = "Three"; zLinkIDSecond = "Four"; break;
        case 4: aColor = "redAnchors"; 
        case 5: aColor = "blueAnchors"; break;
    }
    if (poemIndex == 0) {
        // first poem in list, having next
        html += "<p>" + nLinkBefore + aColor + nLinkAfter + "</p>";
        html += "<script>";
        html += "$('#nextPoem').click(function(event) { ";
        html += "   event.preventDefault();";
        html += "   $('#poemText').foundation('close');";
        html += "   loadMap(" + (poemIndex + 1) + ", " + thePath + ");";
        html += "});";
        html += "</script>";
        html += "</div>";
    }
    else if (poemIndex == myPath.length - 1) {
        // last poem in list, having previous, first, and next path
        if (thePath != 5) {
            // not a random path, so continue on
            // if not the last path (path 4)
            if (myPath[poemIndex].path != 4) {
                // not the last path, so can have next path
                html += "<p>" + nLinkBefore + aColor + nLinkAfter + filler + fLinkBefore + aColor + fLinkAfter + filler + zLinkBefore + zLinkIDFirst + zLinkMiddle + zLinkIDSecond + zLinkAfter + "</p>";
                html += "<script>";
                html += "$('#prevPoem').click(function(event) { ";
                html += "   event.preventDefault();";
                html += "   $('#poemText').foundation('close');";
                html += "   loadMap(" + (poemIndex - 1) + ", " + thePath + ");";
                html += "});";

                html += "$('#nextPoem').click(function(event) { ";
                html += "   event.preventDefault();";
                html += "   $('#poemText').foundation('close');";
                html += "   loadMap(0, " + thePath + ");";
                html += "});";

                html += "$('#nextPath').click(function(event) { ";
                html += "   event.preventDefault();";
                html += "   $('#poemText').foundation('close');";
                html += "   loadMap(" + (poemIndex + 1) + ", " + thePath + ");";
                html += "});";
                html += "</script>";
                html += "</div>";
            }
            else {
                // last path, there is no next path
                html += "<p>" + nLinkBefore + aColor + nLinkAfter + filler + fLinkBefore + aColor + fLinkAfter + "</p>";
                html += "<p>" + zLinkFinal + "</p>";
                html += "<script>";
                html += "$('#prevPoem').click(function(event) { ";
                html += "   event.preventDefault();";
                html += "   $('#poemText').foundation('close');";
                html += "   loadMap(" + (poemIndex - 1) + ", " + thePath + ");";
                html += "});";

                html += "$('#nextPoem').click(function(event) { ";
                html += "   event.preventDefault();";
                html += "   $('#poemText').foundation('close');";
                html += "   loadMap(0, " + thePath + ");";
                html += "});";

                html += "$('#nextPath').click(function(event) { ";
                html += "   event.preventDefault();";
                html += "   $('#poemText').foundation('close');";
                html += "   loadMap(" + (poemIndex + 1) + ", " + thePath + ");";
                html += "});";
                html += "</script>";
                html += "</div>";
            }
        }
        else {
            // random path
            html += "<p>" + nLinkBefore + aColor + nLinkAfter + filler + fLinkBefore + aColor + fLinkAfter + "</p>";
            html += "<p>" + zLinkFinal2 + "</p>";
            html += "<script>";
            html += "$('#prevPoem').click(function(event) { ";
            html += "   event.preventDefault();";
            html += "   $('#poemText').foundation('close');";
            html += "   loadMap(" + (poemIndex - 1) + ", " + thePath + ");";
            html += "});";

            html += "$('#nextPoem').click(function(event) { ";
            html += "   event.preventDefault();";
            html += "   $('#poemText').foundation('close');";
            html += "   loadMap(0, " + thePath + ");";
            html += "});";

            html += "$('#nextPath').click(function(event) { ";
            html += "   event.preventDefault();";
            html += "   $('#poemText').foundation('close');";
            html += "   loadMap(" + (poemIndex + 1) + ", " + thePath + ");";
            html += "});";
            html += "</script>";
            html += "</div>";
        }
    }
    else {
        // any other poem, having previous and next
        html += "<p>" + nLinkBefore + aColor + nLinkAfter + filler + pLinkBefore + aColor + pLinkAfter + "</p>";
        html += "<script>";
        html += "$('#prevPoem').click(function(event) { ";
        html += "   event.preventDefault();";
        html += "   $('#poemText').foundation('close');";
        html += "   loadMap(" + (poemIndex - 1) + ", " + thePath + ");";
        html += "});";

        html += "$('#nextPoem').click(function(event) { ";
        html += "   event.preventDefault();";
        html += "   $('#poemText').foundation('close');";
        html += "   loadMap(" + (poemIndex + 1) + ", " + thePath + ");";
        html += "});";

        html += "</script>";
        html += "</div>";
    }
    html += "</div>";

    return html;
}

google.maps.event.addDomListener(window, 'load', initialize);

//包含当前打印的标记
var myMarkers=Array（）；
//包含路径数据
var myPath=Array（）；
//保存诗歌文本
var poemHTML=“”；
//地图画布
var映射；
//var src='geodata/Westbury.kml'；
//var src='geodata/poems1.kml'；
//当前诗歌索引（从零开始）
诗歌；
函数初始化（）{
var mapCanvas=document.getElementById（'poemMap'）；
变量映射选项={
中心：新google.maps.LatLng（51.258476，-2.184906），
缩放：10，
mapTypeId:google.maps.mapTypeId.HYBRID
}
map=新的google.maps.map（mapCanvas，mapOptions）；
//LoadKmlayer（src，地图）；
}
/*函数loadKmlayer（src，map）{
var kmlLayer=new google.maps.kmlLayer（src{
suppressInfoWindows：对，
不正确：错误，
地图：地图
});
google.maps.event.addListener（kmlLayer，'click'，函数（event）{
var content=event.featureData.infoWindowHtml；
//var poem=document.getElementById（'thePoem'）；
//poem.innerHTML=内容；
$.get（内容）.success（函数（数据）{
$（'#thePoem.content'）.html（数据）；
}); 
$（'poemText'）。基金会（'open'）；
});
}*/
函数shufflePath（）{
var currentIndex=myPath.length，temporaryValue，randomIndex；
//虽然还有一些元素需要洗牌。。。
而（0！==currentIndex）{
//选择剩余的元素。。。
randomIndex=Math.floor（Math.random（）*currentIndex）；
currentIndex-=1；
//并将其与当前元素交换。
时间值=myPath[currentIndex]；
myPath[currentIndex]=myPath[randomIndex]；
myPath[randomIndex]=临时值；
}
}
函数fetchPathPoemData（路径）{
//定义开始id和结束id
//特定路径的id
var start=0；
var-end=1；
//要包含的临时数据结构
//文件中的XML数据
var tempPath；
交换机（路径）{
案例1：开始=1；结束=16；中断；
案例2：开始=17；结束=36；中断；
案例3：开始=37；结束=53；中断；
案例4：开始=54；结束=75；中断；
案例5：开始=1；结束=75；中断；
}
//读入包含基本诗歌数据的XML文件
$.ajax({
键入：“获取”，
url:“geodata/poems.xml”，
数据类型：“xml”，
contentType:“text/xml”，
async:true，
错误：函数（xhr，statusText）{alert（“错误：+statusText+”\n\n“+xhr.responseText）；}，
成功：函数（数据）{
parsePoemXML（数据、开始、结束）；
如果（路径==5）{
//洗牌数据
shufflePath（）；
}
负荷图（0,1）；
}
});
}
函数parsePoemXML（数据、开始、结束）{
$（数据）。查找（'poem'）。每个（函数（）{
var$poem=$（本）；
var id=$poem.attr（“id”）；
var path=$poem.attr（“path”）；
var longitude=$poem.find（“经度”）.text（）；
var latitude=$poem.find（“latitude”）.text（）；
var title=$poem.find（“title”）.text（）；
var file=$poem.find（“文件”）.text（）；
var tempPath=新数组（）；
tempPath.id=id；
tempPath.path=路径；
tempPath.longitude=经度；
tempPath.latitude=纬度；
tempPath.title=标题；
tempPath.file=文件；
如果（id>=start&&id问题是当您解析纬度和经度时，它们被存储为字符串。当您在poemmap.js的第
var sTitle=myPath[poemIndex]行放置断点时。title；


您将看到第一个
finallat
变量的值为
54.155578-0.00029992169216265930235
。只需确保使用parse float包装结果，如下所示：

var longitude = parseFloat($poem.find("longitude").text());
var latitude = parseFloat($poem.find("latitude").text());`

你能包含initPoemPathArray函数吗？我把整个js文件都放进去了，因为这个函数只有两行，不会提供太多信息。太棒了！谢谢！：）我知道这是一个愚蠢的东西…：）