2012-10-22 39 views
-2

我有谷歌地图..标记从XML获取数据..一切工作正常..但我想从XML写信息到标签..但我不知道它是如何做到这一点。 。请看看我的代码..帮助我:((谷歌地图打印数据从XML到信息选项卡

  var gmarkers = []; 
      var gicons = []; 
      map = null; 

var iconImage = new google.maps.MarkerImage('images/intake.png', 

     new google.maps.Size(20, 34), 

     new google.maps.Point(0,0), 

     new google.maps.Point(9, 34)); 

    var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png', 
     new google.maps.Size(37, 34), 
     new google.maps.Point(0,0), 
     new google.maps.Point(9, 34)); 

    var iconShape = { 
     coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0], 
     type: 'poly' 
    }; 

    var contentString = [ 

     '<div id="tabs">', 

     '<ul>', 

     '<li><a href="#tab-1"><span>Info</span></a></li>', 
     '<li><a href="#tab-2"><span>Info</span></a></li>', 
     '<li><a href="#tab-3"><span>Photo</span></a></li>', 
     '</ul>', 

     '<div id="tab-1">', 

     ' i must add info here', 

     '</div>', 
     '<div id="tab-2">', 

     '<p>and here</p>', 

     '</div>', 

     '<div id="tab-3">', 

     '<p>Any info and photo will be here.. <br/> <img src="images/logo.gif" height="60" ></p>', 
     '</div>', 
     '</div>' 
    ].join(''); 

var infowindow = new google.maps.InfoWindow(
    { 

content: contentString 

    }); 


     // A function to create the marker and set up the event window 

function createMarker(latlng,name,html,category) { 

    var contentString = html; 

    var marker = new google.maps.Marker({ 

     position: latlng, 
     icon: gicons[category], 
     shadow: iconShadow, 
     map: map, 
     title: name, 

     zIndex: Math.round(latlng.lat()*-100000)<<5 

     }); 

     // === Store the category and name info as a marker properties === 
     marker.mycategory = category;  

     marker.myname = name; 

     gmarkers.push(marker); 

    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(contentString); 
     infowindow.open(map,marker); 
     }); 
} 

     // == shows all markers of a particular category, and ensures the checkbox is checked == 

     function show(category) { 
     for (var i=0; i<gmarkers.length; i++) { 
      if (gmarkers[i].mycategory == category) { 
      gmarkers[i].setVisible(true); 
      } 
     } 
     // == check the checkbox == 
     document.getElementById(category+"box").checked = true; 
     } 

     // == hides all markers of a particular category, and ensures the checkbox is cleared == 
     function hide(category) { 
     for (var i=0; i<gmarkers.length; i++) { 
      if (gmarkers[i].mycategory == category) { 
      gmarkers[i].setVisible(false); 
      } 
     } 
     // == clear the checkbox == 
     document.getElementById(category+"box").checked = false; 
     // == close the info window, in case its open on a marker that we just hid 
     infowindow.close(); 
     } 

     // == a checkbox has been clicked == 
     function boxclick(box,category) { 
     if (box.checked) { 
      show(category); 
     } else { 
      hide(category); 
     } 

     } 







    function initialize() { 
    var myOptions = { 
     zoom: 8, 
     center: new google.maps.LatLng(40.0000, 48.0000), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map"), myOptions); 


    google.maps.event.addListener(infowindow, 'domready', function() { 
     $("#tabs").tabs(); 
    }); 


    google.maps.event.addListener(map, 'click', function() { 
     infowindow.close(); 
     }); 

这里是XML

 // Read the data 

     downloadUrl("xml/cat.xml", function(doc) { 

    var xml = xmlParse(doc); 

    var markers = xml.documentElement.getElementsByTagName("marker"); 

     for (var i = 0; i < markers.length; i++) { 
      // obtain the attribues of each marker 
      var lat = parseFloat(markers[i].getAttribute("lat")); 
      var lng = parseFloat(markers[i].getAttribute("lng")); 
      var point = new google.maps.LatLng(lat,lng); 
     var address = markers[i].getAttribute("address"); 
      var id = markers[i].getAttribute("id"); 
      var name = markers[i].getAttribute("name"); 
      var html = contentString; 
      var category = markers[i].getAttribute("category"); 
      // create the marker 
      var marker = createMarker(point,name,html,category); 
     } 


     // == show or hide the categories initially == 
     show("intake"); 
     hide("reservoir"); 
     hide("wps"); 
     show("wtp"); 
     hide("wwps"); 
     hide("wwtp"); 
     // == create the initial sidebar == 

     }); 


toggleKML = function(x) { 
      i = x; 
     //alert(i); 
     //alert(toggleArray[0]); 
     //alert(toggleArray[1]); 
     //alert(toggleArray[2]);   
     if (toggleArray[i] == 1) { 
     kmlArray[i].setMap(null); 

     toggleArray.splice(i,1,'0');     
     } 
     else { 
     kmlArray[i].setMap(map); 

     toggleArray.splice(i,1,'1');   
     } 
}} 
</script> 

伙计们请帮我((..

超过12小时,我在这个工作,但它不起作用((.. ..

如何将xml数据放入contentstring中?

我的XML例子也..

<marker code="20070" id="WWS7" name="8 Wells Nisaqala Gallery" title="NWSSP-2" capacity="9.84" completed="0" lat="xxx" lng="xx" category="intake"/> 
+0

我不明白你的“标签”的意思 - 你的意思而显示不同内容的信息窗口,当你点击不同的标志? – duncan

+0

是的..)有可能吗? – Ruslan

回答

0

你需要设置信息窗口的内容,基于标记的单击事件。您还需要使用最可能的闭包来完成此操作。现在你每次都设置相同的内容,因为contentString从不改变。您只需使用XML文件中的值在您的点击事件处理程序中设置该内容即可。

+0

感谢答案..但我不知道如何做到这一点。((i've检查不止一个选项,但没有奏效.. 有什么想法? – Ruslan

0

我意识到你问什么,你可以在这里查看我的代码:http://turom-mice.it/condorincentive/incentive.html(使用Firebug拿到剧本和相关的XML文件) 代码被注释掉尽可能,但如果你需要解释,只是问。 代码是各种搜索和阅读以及Google Maps v3 API /示例的结果。

希望它有帮助。 皮疹*