简体   繁体   English

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

[英]html + google.maps.InfoWindow() + external source xml document (XMLHttpRequest)

I have a HTML page which hosts a google maps info control. 我有一个HTML页面,其中托管一个Google地图信息控件。 I am able to display a marker giving static values hard-coded in the html document. 我能够显示一个标记,该标记给出在html文档中进行硬编码的静态值。 Now i am trying to get the values from a XML external source document. 现在,我试图从XML外部源文档中获取值。 This is what I want to do, 这就是我要做的

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
});

}
}

The xml document, 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>

My tag is as below, 我的标签如下

<body onload="if (onLoad) onLoad(); initialize()">

This is not working, any help will be appreciated. 这是行不通的,将不胜感激。

First of all code will not work well because there are some bugs in it. 首先,由于其中存在一些错误,因此代码无法正常工作。 like you have not mentioned event listener for markers for info window like that. 就像您没有提到那样的信息窗口标记的事件监听器。

google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
  infowindow.setContent(locations[i][0]);
  infowindow.open(map, marker);
}
})(marker, i));

You can find reference from 您可以从以下位置找到参考

Google Maps API v3: auto-center map with multiple markers Google Maps API v3:具有多个标记的自动居中地图

Or 要么

http://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/ http://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/

Please look into this FIDDLE http://jsfiddle.net/x5R63/ 请查看此FILDLE http://jsfiddle.net/x5R63/

**EDIT FOR FURTHER ANSWER ** **编辑更多答案**

//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);
 }

Now based on your situation you can use above code like below: 现在,根据您的情况,您可以使用上面的代码,如下所示:

var len = getNodeLength(xmlDoc,"CD");

for(i=0;i<len;i++)
{
   var latLat = getExtendedNodeValue("COUNTRY",xmlDoc,i);    
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM