html + google.maps.InfoWindow() + 外部源 xml 文档 (XMLHttpRequest)答案

【问题标题】：html + google.maps.InfoWindow() + external source xml document (XMLHttpRequest)html + google.maps.InfoWindow() + 外部源 xml 文档 (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 函数调用。仍然无法在谷歌地图上获取标记。

标签： javascript html xmldocument

【解决方案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 外观并在谷歌地图上显示吗？再次感谢。