2014-02-26 20 views
1

我想創建一個html頁面,顯示在谷歌地圖上的personell。要在地圖上創建不同的標記,我有一個javascript,它爲陣列位置中的每個條目創建一個標記。這個數組應該填充來自數據庫的數據(在xml中),並且必須轉換成我的html。使用範圍內的應用程序模板

請把我的XSL一起來看看:

<?xml version="1.0" encoding="utf-8" ?> 
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
<xsl:template match="/"> 
<html> 
    <head> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&sensor=false"></script> 
    <script type="text/javascript"> 
     var infos = []; 
     var locations = [ 
      <xsl:apply-templates select='//rows'/> 
     ]; 
     function initialize() { 
      var myOptions = { 
       center: new google.maps.LatLng(50.59, 4.35), 
       zoom: 8, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      var map = new google.maps.Map(document.getElementById("default"),myOptions); 
      setMarkers(map,locations) 
      } 
     function setMarkers(map,locations){ 
      var marker, i 
      for (i = 0; i < locations.length; i++) 
      { var name = locations[i][0] 
       var long = locations[i][1] 
       var lat = locations[i][2] 
       var contentmarker = locations[i][3] 
       latlngset = new google.maps.LatLng(lat, long); 
       var marker = new google.maps.Marker({ 
        map: map, title: name , position: latlngset 
       }); 
       map.setCenter(marker.getPosition()) 
       var content = contentmarker 
       var infowindow = new google.maps.InfoWindow() 
       google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
        return function() { 
        /* close the previous info-window */ 
        closeInfos(); 
        infowindow.setContent(content); 
          infowindow.open(map,marker); 
          /* keep the handle, in order to close it on next click event */ 
          infos[0]=infowindow; 
        }; 
       })(marker,content,infowindow)); 
      } 
     } 
     function closeInfos(){ 
      if(infos.length &gt; 0){ 
       /* detach the info-window from the marker ... undocumented in the API docs */ 
       infos[0].set("marker", null); 
       /* and close it */ 
       infos[0].close(); 
       /* blank the array */ 
       infos.length = 0; 
      } 
     } 
     </script> 
    </head> 
    <body onload="initialize()"> 
     <div id="default" style="width:100%; height:100%"></div> 
    </body> 
</html> 
</xsl:template> 
<xsl:template match='rows'> 
<xsl:for-each-group select='row' group-by='@SiteNr'> 
    [&apos;<xsl:value-of select='@SiteName'/>&apos;, &apos;<xsl:value-of select='@LON_R'/>&apos;, &apos;<xsl:value-of select='@LAT_R'/> 
    &apos;, &apos;&lt;b&gt;<xsl:value-of select='@RegionName'/>&lt;/b&gt;&lt;br&gt;Details (<xsl:value-of select='@SiteNr'/>): 
    <table border='1'> 
     <tr> 
      <th>PersNr</th> 
      <th>Name</th> 
      <th>Firstname</th> 
      <th>DeptNr</th> 
      <th>DeptName</th> 
      <th>PostNr</th> 
     </tr> 
     <xsl:for-each select="current-group()"> 
      <xsl:apply-templates select="."/> 
       <tr> 
        <td><xsl:value-of select="@PersNr"/></td> 
        <td><xsl:value-of select="@Name"/></td> 
        <td><xsl:value-of select="@FirstName"/></td> 
        <td><xsl:value-of select="@DeptCode"/></td> 
        <td><xsl:value-of select="@DeptName"/></td> 
        <td><xsl:value-of select="@PostNr"/></td> 
       </tr> 
     </xsl:for-each> 
     <tr> 
      <td colspan='5'>TOTAAL</td> 
      <td align='center'><xsl:value-of select="(count(current-group()/@PersNr))"/></td> 
     </tr> 
    </table>&apos;] 
</xsl:for-each-group> 
</xsl:template> 
</xsl:stylesheet> 

如果我嘗試CDATA周圍的腳本,它運行,但我的腳本標記與<和>轉化和腳本好好嘗試一下再工作。

提取物我的xml:

<rows> 
    <row PersNr="B15975" Name="Vandendriessche" Firstname="Rudolf" DeptCode"J20100" DeptName="HR" Post="1230" RegionNum="3" RegionName="Plateau Berlaar" SiteNum="11002D" SiteName="KW BELGIELEI" LON_kw="4.418" LAT_kw="51.205" /> 

我是新來的XSL/HTML/JavaScript的,所以如果你知道答案,請大家幫我,有一些額外的信息(如果你能提供的話)。

+2

你能出多一點的XSLT,而不只是截斷它在中間(特別是相匹配** **行並遵循XSL的JavaScript模板:申請-templates)。此外,顯示您的輸入XML可能會有所幫助。謝謝! –

回答

0

對於需要更換此行

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&sensor=false"></script> 

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&amp;sensor=false"></script> 

尤其注意&需求如何被轉義爲&amp;

至於讓你的JavaScript已建成後上班開始,你可以手動轉義所有有問題的字符。在你的情況,這意味着更換此行

for (i = 0; i < locations.length; i++) 

這一行

for (i = 0; i &lt; locations.length; i++) 

這是阻止XML解析器治療<作爲標籤的開始。

或者,您可以將文本包裝爲CDATA,但您需要在兩個位置執行此操作。之前的xsl:apply-templates之後。例如,你可以這樣做

<script type="text/javascript"> 
    <![CDATA[ 
    var infos = []; 
    var locations = [ 
    ]]> 
    <xsl:apply-templates select='//rows'/> 
    <![CDATA[ 
    ]; 
    function initialize() { 
    } 
    ]]> 
</script> 
+0

如果我更改腳本中有問題的字符,不會被識別爲XSL,並且不會工作。爲了讓應用模板得到識別,我必須在標籤腳本週圍更改< and >。但是這與使用CDATA時的結果相同,請參見下文。 我試圖將文本作爲CDATA包裝,但是當它轉換爲html時,腳本的標記被更改爲<和>,瀏覽器不知道如何處理它,只是將其顯示爲文本而不是將其識別爲腳本。 – user3354941