Javascript 仅从XML文件和刷新标记动态打印坐标
我试图用XML文件中的坐标在谷歌地图上绘制标记,下面是我的工作脚本。我的XML正在动态更新。我的目标是绘制坐标,而不是单独刷新标记,而不是整个页面(目前使用自动刷新在5秒钟内实现) 这是我的XMLJavascript 仅从XML文件和刷新标记动态打印坐标,javascript,html,xml,google-maps,google-maps-api-3,Javascript,Html,Xml,Google Maps,Google Maps Api 3,我试图用XML文件中的坐标在谷歌地图上绘制标记,下面是我的工作脚本。我的XML正在动态更新。我的目标是绘制坐标,而不是单独刷新标记,而不是整个页面(目前使用自动刷新在5秒钟内实现) 这是我的XML <markers> <marker information="109.127.8.242" Longitude="49.892010" Latitude="40.377670" /> <marker information="109.169.87.141" Longitu
<markers>
<marker information="109.127.8.242" Longitude="49.892010" Latitude="40.377670" />
<marker information="109.169.87.141" Longitude="-0.719860" Latitude="51.522790" />
<marker information="109.229.210.250" Longitude="24.105890" Latitude="56.946000" />
<marker information="109.229.36.65" Longitude="46.172170" Latitude="48.279550" />
<marker information="109.235.59.44" Longitude="12.095560" Latitude="49.015000" />
</markers>
如果这是刷新标记的有效方法,有什么建议吗?将对
downloadUrl
的调用移动到它自己的函数中。从initialize
函数调用该函数。设置超时以每5秒递归调用函数。比如:
var currentmarks=[];
函数初始化(){
变量映射选项={
缩放:2,
中心:新google.maps.LatLng(51.5072,0.1275)
}
map=new google.maps.map(document.getElementById('map_canvas'),mapOptions);
getXml();
var interval=window.setInterval(getXml,5000);
}
函数getXml(){
对于(var i=0;i
太好了。它是这样工作的。我最初认为ajax可能是必要的。。这真的解决了我的要求。谢谢。我还注意到,标记只与现有标记相加。第一次更新XML时,我有10个输入,第二次只有5个输入,当XML文件刷新时,我应该只有5个输入,而不是15个输入。我遗漏了什么吗?您需要做的是在每次调用函数时清除标记。为此,我更新了我的答案,加入了一个全局变量,currentmarks
。将每个标记添加到该数组中。加载XML文件时,首先通过执行setMap(null)
从映射中删除该数组中的每个标记。然后,在循环新的XML集合时,将每个新标记添加到数组中,以便5秒钟后可以轻松地再次删除它们!一切正常。谢谢。有没有办法从2个xml文件中导入数据并在每个文件上显示不同的标记?
/**
* Returns an XMLHttp instance to use for asynchronous
* downloading. This method will never throw an exception, but will
* return NULL if the browser does not support XmlHttp for any reason.
* @return {XMLHttpRequest|Null}
*/
function createXmlHttpRequest() {
try {
if (typeof ActiveXObject != 'undefined') {
return new ActiveXObject('Microsoft.XMLHTTP');
} else if (window["XMLHttpRequest"]) {
return new XMLHttpRequest();
}
} catch (e) {
changeStatus(e);
}
return null;
};
/**
* This functions wraps XMLHttpRequest open/send function.
* It lets you specify a URL and will call the callback if
* it gets a status code of 200.
* @param {String} url The URL to retrieve
* @param {Function} callback The function to call once retrieved.
*/
function downloadUrl(url, callback) {
var status = -1;
var request = createXmlHttpRequest();
if (!request) {
return false;
}
request.onreadystatechange = function() {
if (request.readyState == 4) {
try {
status = request.status;
} catch (e) {
// Usually indicates request timed out in FF.
}
if (status == 200) {
callback(request.responseXML, request.status);
request.onreadystatechange = function() {};
}
}
}
request.open('GET', url, true);
try {
request.send(null);
} catch (e) {
changeStatus(e);
}
};
/**
* Parses the given XML string and returns the parsed document in a
* DOM data structure. This function will return an empty DOM node if
* XML parsing is not supported in this browser.
* @param {string} str XML string.
* @return {Element|Document} DOM.
*/
function xmlParse(str) {
if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
}
if (typeof DOMParser != 'undefined') {
return (new DOMParser()).parseFromString(str, 'text/xml');
}
return createElement('div', null);
}
/**
* Appends a JavaScript file to the page.
* @param {string} url
*/
function downloadScript(url) {
var script = document.createElement('script');
script.src = url;
document.body.appendChild(script);
}
<markers>
<marker information="109.127.8.242" Longitude="49.892010" Latitude="40.377670" />
<marker information="109.169.87.141" Longitude="-0.719860" Latitude="51.522790" />
<marker information="109.229.210.250" Longitude="24.105890" Latitude="56.946000" />
<marker information="109.229.36.65" Longitude="46.172170" Latitude="48.279550" />
<marker information="109.235.59.44" Longitude="12.095560" Latitude="49.015000" />
</markers>