html + google.maps.InfoWindow() + 外部源 xml 文档 (XMLHttpRequest)
Posted
技术标签:
【中文标题】html + google.maps.InfoWindow() + 外部源 xml 文档 (XMLHttpRequest)【英文标题】:html + google.maps.InfoWindow() + external source xml document (XMLHttpRequest) 【发布时间】:2014-01-15 00:01:27 【问题描述】:我有一个托管谷歌地图信息控件的 html 页面。我能够显示一个标记,在 html 文档中给出硬编码的静态值。现在我正在尝试从 XML 外部源文档中获取值。这就是我想做的,
function initialize(Object)
var mapOptions =
center: new google.maps.LatLng(19.314059,84.801407),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
marker:true
;
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
if (window.XMLHttpRequest)
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
else
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("GET","cd_catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("CD");
for (i = 0; i < x.length; i++)
var LatLat = x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue;
var LongLong = x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue;
var Title = x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
var myLatlng = new google.maps.LatLng(LatLat, LongLong);
var marker = new google.maps.Marker(
position: myLatlng,
map: map,
title: Title
);
xml文档,
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy® -->
<CATALOG>
<CD>
<TITLE>Ambupa Bauri Street</TITLE>
<ARTIST>56</ARTIST>
<COUNTRY>19.3173287566233</COUNTRY>
<COMPANY>84.8497137612449</COMPANY>
</CD>
<CD>
<TITLE>Anadrigam</TITLE>
<ARTIST>64</ARTIST>
<COUNTRY>19.3128836507433</COUNTRY>
<COMPANY>84.7996238277367</COMPANY>
</CD>
</CATALOG>
我的标签如下,
<body onload="if (onLoad) onLoad(); initialize()">
这不起作用,任何帮助将不胜感激。
【问题讨论】:
从正文 onload 函数中删除“if (onLoad)”。我认为这可能是个问题 感谢您的回复,我确实在按钮单击事件中添加了 onload 函数调用。 仍然无法在谷歌地图上获取标记。 【参考方案1】:首先,代码将无法正常运行,因为其中存在一些错误。就像你没有提到这样的信息窗口标记的事件侦听器。
google.maps.event.addListener(marker, 'click', (function(marker, i)
return function()
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
)(marker, i));
可以参考
Google Maps API v3: auto-center map with multiple markers
或者
http://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/
请查看这个 FIDDLE http://jsfiddle.net/x5R63/
**编辑以获得进一步的答案**
//GET NODE LENGTH
function getNodeLength(nodeName, xmlNode)
return xmlNode.getElementsByTagName(nodeName).length;
//GET NODE VALUE
function getNodeValue(nodeName, xmlNode, i)
return xmlNode.getElementsByTagName(nodeName)[i].firstChild.nodeValue;
function getExtendedNodeValue(nodeName, xmlNode, i)
var node = "";
if(typeof(xmlNode.getElementsByTagName(nodeName)[i]) != "undefined" && xmlNode.getElementsByTagName(nodeName)[i].hasChildNodes())
node = xmlNode.getElementsByTagName(nodeName)[i].firstChild.nodeValue;
return node;
function getAttributeValue(i, nodename, data)
return data[i].getAttribute(nodename);
现在根据您的情况,您可以使用上面的代码,如下所示:
var len = getNodeLength(xmlDoc,"CD");
for(i=0;i<len;i++)
var latLat = getExtendedNodeValue("COUNTRY",xmlDoc,i);
【讨论】:
再次感谢,我有点理解这个问题,当我直接将值替换为 var LatLat = "19.333" var LongLong = "35.333" var Title = "Orissa ",但我认为我无法获取存储在 xml 文档中的信息。你能帮我看看如何打开 xml 并阅读信息并将其放入 for 外观并在谷歌地图上显示吗?再次感谢。以上是关于html + google.maps.InfoWindow() + 外部源 xml 文档 (XMLHttpRequest)的主要内容,如果未能解决你的问题,请参考以下文章