Question

我正在根据客户端请求构建基于Google maps API的网页。我将数据从数据库中拉入xml，然后链接到地图上的标记（每个记录的部分数据是纬度和经度，用于设置标记）。当用户点击标记时，他们会在页面div中看到与该位置相关的内容（内容是音频文件的标题，照片，音频文件和副本）。

一切正常，除了......我无法弄清楚如何显示成绩单，这是一个文本文件。 xml节点包含完整路径名，包含实际文件的文件夹存储在服务器上。我知道如何使用php进行此操作，但无法使用php扩展名重命名我的文件，因为Google Maps API不允许它（地图消失）。

以下是代码的相关部分：

downloadUrl("xmlTest.php", function(data) 
  {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("Sound_xcrpt");
    for (var i = 0; i < markers.length; i++) 
    {
      var title = markers[i].getAttribute("se_title");
      var desc = markers[i].getAttribute("se_desc");
      var type = markers[i].getAttribute("se_contrib");
      var ph_title = markers[i].getAttribute("ph_title");
      var ph_web = markers[i].getAttribute("ph_web");
      var ph_thumb = markers[i].getAttribute("ph_thumb");
      var trans_ex = markers[i].getAttribute("trans_xcrpt");        
      var audio = markers[i].getAttribute("se_audio_file");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("se_lat")),
          parseFloat(markers[i].getAttribute("se_lng")));


      var html =   

      '<head>' +
      '<link rel="stylesheet" href="infoStyle.css" type="text/css">' +
      '</head>' +
      '<html>' +
      '<body>' +        
      '<header id="title">' + title + '</header>' + 
      '</section id="desc">' + desc +
      '</section>' +
      '<section id="photo_thumb">' +
      '<img src="'+ph_thumb+'"/>' +
      '</section>' +
      '</body>' +
      '</html>';

      var winHtml = 
      '<head>' +
      '<link rel="stylesheet" href="styleWin2.css">' +
      '</head>' +
      '<body>' +
      '<header id="title2">' + ph_title + '</header>' +
      '<div class="photos">' + 
      '<img src="'+ph_web+'"/>' + 
      '</div>' +
      '<div class="trans">' +trans_ex+  
      '</div>' +
      '<footer id="audio">' +
      '<audio autoplay="autoplay" controls="controls">' + 
      '<source src="'+audio+'">' +
      '</audio>' +
      '</footer>' +
      '</body>';

      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker(
      {
        map: map,
        position: point,
        icon: icon.icon,
        animation: google.maps.Animation.DROP,
        shadow: icon.shadow
      });

      bindInfoWindow(marker, map, infoWindow, html);
      contentBox(marker, map, content, winHtml, infoWindow);

    }
  });
}

“trans_ex”包含路径名称数组。上面设置代码的方式，它显示div中的实际路径名，而不是该路径名指向的文本文件的内容。

是否有javascript（或jquery）方法来执行此操作？我知道这很棘手，因为我在这里有一个服务器端请求。

谢谢你的帮助，Cheryl

Answer 1

您要显示文本文件的内容吗？以下URL的人也需要读取文本文件的内容。也许这会有所帮助吗？

jquery - Read a text file?

Answer 2

您需要的是调用AJAX从服务器获取脚本，并在单击标记后将其附加到DIV。第二条评论中的XMLHttpRequest对象是AJAX的基础，jquery通过jQuery.ajax（）（http://api.jquery.com/jQuery.ajax/）有一个非常好的抽象。

它基本上隐藏了你的第二条评论中的复杂性，并让你在响应进来后处理你想要做的事情。在你的情况下，你会希望转录本的DIV填充来自成绩单的回复。

事实上，jQuery通过提供load（）函数（http://api.jquery.com/load/）进一步抽象。您需要在标记的单击事件上调用此函数，并为其提供正确的转录路径

通过xml路径名从外部文件夹中读取文本文件（Google maps API）

2 个答案: