通过xml路径名从外部文件夹读取文本文件(Google Maps API) [英] Reading text file from external folder via xml path name (Google maps API)
问题描述
我正在根据客户请求围绕Google Maps API构建一个网页.我正在将数据从数据库中提取到xml中，然后将其链接到地图上的标记(每条记录的部分数据是经度和纬度，用于设置标记).当用户单击标记时，他们会在页面div中看到与该位置有关的内容(该内容是标题，照片，音频文件和音频文件的笔录).
I'm building a webpage based around the Google maps API, per client request. I'm pulling data from a database into xml that is then linked to markers on the map (part of the data for each record is latitude and longitude, which sets the marker). When the user clicks on the marker, they see content relating to that place in a page div (the content is a title, photo, audio file, and transcript of the audio file).
一切正常，除了...我不知道如何显示成绩单，它是一个文本文件. xml节点包含完整的路径名，带有实际文件的文件夹存储在服务器上.我知道如何使用php来执行此操作，但是无法使用php扩展名重命名我的文件，因为Google Maps API不允许使用该文件(地图消失了).
Everything is working except... I can't figure out how to display the transcript, which is a text file. The xml node contains the full pathname, and the folder with the actual file is stored on the server. I know how to do this with php, but can't rename my file with a php extension because the Google Maps API won't allow it (the map disappears).
这是代码的相关部分:
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中显示实际路径名，而不是该路径名指向的文本文件的内容.
"trans_ex" holds the path name array. The way the code is set up above, it displays the actual path name in the div, not the content of the text file to which that path name points.
是否有JavaScript(或jquery)方法可以做到这一点?我知道这很棘手，因为这里有一个服务器端请求.
Is there a javascript (or jquery) method to do this? I know it's tricky because I've got a server-side request in here.
感谢您的帮助，谢丽尔
推荐答案
单击标记后，您需要调用AJAX从服务器获取成绩单并将其附加到DIV.第二个注释中的XMLHttpRequest对象是AJAX的基础，而jquery具有一个非常好的抽象，可以通过jQuery.ajax()(http://api.jquery.com/jQuery.ajax/)来实现.
What you need is to call AJAX to get the transcript from the server and append it to the DIV once the marker is clicked. XMLHttpRequest object in your second comment is the foundation of AJAX and jquery has a very nice abstraction to do that via jQuery.ajax() (http://api.jquery.com/jQuery.ajax/).
基本上，它隐藏了第二条注释中的复杂性，并让您在响应输入后处理要执行的操作.对于您的情况，您希望记录本的DIV中填充记录本的响应.
It basically hides the complexities in your second comments and let you deal with what you want to do once the response comes in. In your case, you would want the DIV for the transcript to be populated with the response from the transcript.
事实上，jQuery通过提供load()函数(http://api.jquery.com/load/)进行了进一步的抽象.您需要在标记的点击事件后调用此函数，并为其提供正确的转录路径
In fact, jQuery made further abstraction by providing load() function (http://api.jquery.com/load/). You need to call this function upon click event for the marker and providing it with the right path for the transcript
这篇关于通过xml路径名从外部文件夹读取文本文件(Google Maps API)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
