Question

我已经设置了一项任务，其中一部分是在使用XSLT和JQuery mobile创建的页面上显示谷歌地图。我看了几个与我正在做的相似的例子，但它们似乎对我不起作用。以下是我当前尝试中涉及的线路，有人能告诉我为什么地图不会出现吗？我的预期结果是谷歌地图显示在每个餐馆页面上定义的表格的单元格中。

<?xml version="1.0" encoding="ISO-8859-1"?><!-- DWXMLSource="restaurants.xml" -->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes"/>
<xsl:template match="/">
<!--<xsl:text disable-output-escaping="yes">
&lt;!DOCTYPE html&gt;
</xsl:text>-->
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<title>Choose a restaurant</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
  zoom: 8,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);
}
</script>




</head>

<body onload="initialize()">


<div data-role="page" id="frontpage">

<div data-role="header">
<h1>Choose a Restaurant</h1>
</div><!-- /header -->

<div data-role="content">
<xsl:for-each select="listing/restaurant">
<div data-role="collapsible" data-theme="a" data-content-theme="a">
<h3><xsl:value-of select="name"/> - <xsl:value-of select="cuisine"/> - Price range:-  <xsl:value-of select="price"/></h3>
<table border="0"   cellpadding="10"> 
<tr>
<td><p><img><xsl:attribute name="src"><xsl:value-of select="picture" /></xsl:attribute></img></p></td>

＃点击这里获取更多信息

</div>
</xsl:for-each> 

</div>  
<!-- /content -->

<div data-role="footer">
<h4>Choose a Restaurant</h4>
</div><!-- /footer -->
</div><!-- /page -->



<div data-role="page" id="rest1">

<div data-role="header">
<xsl:for-each select="listing/restaurant[restid ='rest1']">
<h1><xsl:value-of select="name"/></h1>
</xsl:for-each>
</div>
<div data-role="content">
<xsl:for-each select="listing/restaurant[restid ='rest1']">
<table border="1" cellspacing="10" cellpadding = "5">
<tr>
<td><img><xsl:attribute name="src"><xsl:value-of select="picture" /></xsl:attribute </img></td>
<td>
<p><xsl:value-of select="opening_times/monday"/></p>
<p><xsl:value-of select="opening_times/tuesday"/></p>
<p><xsl:value-of select="opening_times/wednesday"/></p>
<p><xsl:value-of select="opening_times/thursday"/></p>
<p><xsl:value-of select="opening_times/friday"/></p>
<p><xsl:value-of select="opening_times/saturday"/></p>
<p><xsl:value-of select="opening_times/sunday"/></p>
</td>
<td><div id="map_canvas" ></div></td>

</tr>
<tr>
<td><p>Christmas Offer:- <xsl:value-of select="christmas_offer"/></p></td>
<td><center><p>Overall Rating:- <xsl:value-of select="rating"/></p></center></td>
<td></td>
</tr>
</table>
</xsl:for-each>
</div>
<div data-role="footer">
<xsl:for-each select="listing/restaurant[restid ='rest1']">
<h4><xsl:value-of select="name"/></h4>
</xsl:for-each>
</div><!-- /footer -->

</div>

<div data-role="page" id="rest2">

<div data-role="header">
<xsl:for-each select="listing/restaurant[restid ='rest2']">
<h1><xsl:value-of select="name"/></h1>
</xsl:for-each>
</div>
<div data-role="content">
<xsl:for-each select="listing/restaurant[restid ='rest2']">
<table border="1" cellspacing="10" cellpadding = "5">
<tr>
<td><img><xsl:attribute name="src"><xsl:value-of select="picture" /></xsl:attribute></img></td>
<td>
<p><xsl:value-of select="opening_times/monday"/></p>
<p><xsl:value-of select="opening_times/tuesday"/></p>
<p><xsl:value-of select="opening_times/wednesday"/></p>
<p><xsl:value-of select="opening_times/thursday"/></p>
<p><xsl:value-of select="opening_times/friday"/></p>
<p><xsl:value-of select="opening_times/saturday"/></p>
<p><xsl:value-of select="opening_times/sunday"/></p>
</td>
</tr>
<tr>
<td><p>Christmas Offer:- <xsl:value-of select="christmas_offer"/></p></td>
<td><center><p>Overall Rating:- <xsl:value-of select="rating"/></p></center></td>
<td></td>
</tr>
</table>
</xsl:for-each>
</div>
<div data-role="footer">
<xsl:for-each select="listing/restaurant[restid ='rest2']">
<h4><xsl:value-of select="name"/></h4>
</xsl:for-each>
</div><!-- /footer -->

</div>

<div data-role="page" id="rest3">

<div data-role="header">
<xsl:for-each select="listing/restaurant[restid ='rest3']">
<h1><xsl:value-of select="name"/></h1>
</xsl:for-each>
</div>
<div data-role="content">
<xsl:for-each select="listing/restaurant[restid ='rest3']">
<table border="1" cellspacing="10" cellpadding = "5">
<tr>
<td><img><xsl:attribute name="src"><xsl:value-of select="picture" /></xsl:attribute>  </img></td>
<td>
<p><xsl:value-of select="opening_times/monday"/></p>
<p><xsl:value-of select="opening_times/tuesday"/></p>
<p><xsl:value-of select="opening_times/wednesday"/></p>
<p><xsl:value-of select="opening_times/thursday"/></p>
<p><xsl:value-of select="opening_times/friday"/></p>
<p><xsl:value-of select="opening_times/saturday"/></p>
<p><xsl:value-of select="opening_times/sunday"/></p>
</td>
</tr>
<tr>
<td><p>Christmas Offer:- <xsl:value-of select="christmas_offer"/></p></td>
<td><center><p>Overall Rating:- <xsl:value-of select="rating"/></p></center></td>
<td></td>
</tr>
</table>
</xsl:for-each>
</div>
<div data-role="footer">
<xsl:for-each select="listing/restaurant[restid ='rest3']">
<h4><xsl:value-of select="name"/></h4>
</xsl:for-each>
</div><!-- /footer -->
</div>

<div data-role="page" id="rest4">

<div data-role="header">
<xsl:for-each select="listing/restaurant[restid ='rest4']">
<h1><xsl:value-of select="name"/></h1>
</xsl:for-each>
</div>
<div data-role="content">
<xsl:for-each select="listing/restaurant[restid ='rest4']">
<table border="1" cellspacing="10" cellpadding = "5">
<tr>
<td><img><xsl:attribute name="src"><xsl:value-of select="picture" /></xsl:attribute>   </img></td>
<td>
<p><xsl:value-of select="opening_times/monday"/></p>
<p><xsl:value-of select="opening_times/tuesday"/></p>
<p><xsl:value-of select="opening_times/wednesday"/></p>
<p><xsl:value-of select="opening_times/thursday"/></p>
<p><xsl:value-of select="opening_times/friday"/></p>
<p><xsl:value-of select="opening_times/saturday"/></p>
<p><xsl:value-of select="opening_times/sunday"/></p>
</td>
</tr>
<tr>
<td><p>Christmas Offer:- <xsl:value-of select="christmas_offer"/></p></td>
<td><center><p>Overall Rating:- <xsl:value-of select="rating"/></p></center></td>
<td></td>
</tr>
</table>
</xsl:for-each>
</div>
<div data-role="footer">
<xsl:for-each select="listing/restaurant[restid ='rest4']">
<h4><xsl:value-of select="name"/></h4>
</xsl:for-each>
</div><!-- /footer -->

</div>


<div data-role="page" id="rest5">

<div data-role="header">
<xsl:for-each select="listing/restaurant[restid ='rest5']">
<h1><xsl:value-of select="name"/></h1>
</xsl:for-each>
</div>
<div data-role="content">
<xsl:for-each select="listing/restaurant[restid ='rest5']">
<table border="1" cellspacing="10" cellpadding = "5">
<tr>
<td><img><xsl:attribute name="src"><xsl:value-of select="picture" /></xsl:attribute> </img></td>
<td>
<p><xsl:value-of select="opening_times/monday"/></p>
<p><xsl:value-of select="opening_times/tuesday"/></p>
<p><xsl:value-of select="opening_times/wednesday"/></p>
<p><xsl:value-of select="opening_times/thursday"/></p>
<p><xsl:value-of select="opening_times/friday"/></p>
<p><xsl:value-of select="opening_times/saturday"/></p>
<p><xsl:value-of select="opening_times/sunday"/></p>
</td>
</tr>
<tr>
<td><p>Christmas Offer:- <xsl:value-of select="christmas_offer"/></p></td>
<td><center><p>Overall Rating:- <xsl:value-of select="rating"/></p></center></td>
<td></td>
</tr>
</table>
</xsl:for-each>
</div>
<div data-role="footer">
<xsl:for-each select="listing/restaurant[restid ='rest5']">
<h4><xsl:value-of select="name"/></h4>
</xsl:for-each>
</div><!-- /footer -->  

</div>

<div data-role="page" id="rest6">

<div data-role="header">
<xsl:for-each select="listing/restaurant[restid ='rest6']">
<h1><xsl:value-of select="name"/></h1>
</xsl:for-each>
</div>
<div data-role="content">
<xsl:for-each select="listing/restaurant[restid ='rest6']">
<table border="1" cellspacing="10" cellpadding = "5">
<tr>
<td><img><xsl:attribute name="src"><xsl:value-of select="picture" /></xsl:attribute>   </img></td>
<td>
<p><xsl:value-of select="opening_times/monday"/></p>
<p><xsl:value-of select="opening_times/tuesday"/></p>
<p><xsl:value-of select="opening_times/wednesday"/></p>
<p><xsl:value-of select="opening_times/thursday"/></p>
<p><xsl:value-of select="opening_times/friday"/></p>
<p><xsl:value-of select="opening_times/saturday"/></p>
<p><xsl:value-of select="opening_times/sunday"/></p>
</td>
</tr>
<tr>
<td><p>Christmas Offer:- <xsl:value-of select="christmas_offer"/></p></td>
<td><center><p>Overall Rating:- <xsl:value-of select="rating"/></p></center></td>
<td></td>
</tr>
</table>
</xsl:for-each>
</div>
<div data-role="footer">
<xsl:for-each select="listing/restaurant[restid ='rest6']">
<h4><xsl:value-of select="name"/></h4>
</xsl:for-each>
</div><!-- /footer -->

</div>

<div data-role="page" id="rest7">

<div data-role="header">
<xsl:for-each select="listing/restaurant[restid ='rest7']">
<h1><xsl:value-of select="name"/></h1>
</xsl:for-each>
</div>
<div data-role="content">
<xsl:for-each select="listing/restaurant[restid ='rest7']">
<table border="1" cellspacing="10" cellpadding = "5">
<tr>
<td><img><xsl:attribute name="src"><xsl:value-of select="picture" /></xsl:attribute></img></td>
<td>
<p><xsl:value-of select="opening_times/monday"/></p>
<p><xsl:value-of select="opening_times/tuesday"/></p>
<p><xsl:value-of select="opening_times/wednesday"/></p>
<p><xsl:value-of select="opening_times/thursday"/></p>
<p><xsl:value-of select="opening_times/friday"/></p>
<p><xsl:value-of select="opening_times/saturday"/></p>
<p><xsl:value-of select="opening_times/sunday"/></p>
</td>
</tr>
<tr>
<td><p>Christmas Offer:- <xsl:value-of select="christmas_offer"/></p></td>
<td><center><p>Overall Rating:- <xsl:value-of select="rating"/></p></center></td>
<td></td>
</tr>
</table>
</xsl:for-each>
</div>
<div data-role="footer">
<xsl:for-each select="listing/restaurant[restid ='rest7']">
<h4><xsl:value-of select="name"/></h4>
</xsl:for-each>
</div><!-- /footer -->

</div>

<div data-role="page" id="rest8">

<div data-role="header">
<xsl:for-each select="listing/restaurant[restid ='rest8']">
<h1><xsl:value-of select="name"/></h1>
</xsl:for-each>
</div>
<div data-role="content">
<xsl:for-each select="listing/restaurant[restid ='rest8']">
<table border="1" cellspacing="10" cellpadding = "5">
<tr>
<td><img><xsl:attribute name="src"><xsl:value-of select="picture" /></xsl:attribute></img></td>
<td>
<p><xsl:value-of select="opening_times/monday"/></p>
<p><xsl:value-of select="opening_times/tuesday"/></p>
<p><xsl:value-of select="opening_times/wednesday"/></p>
<p><xsl:value-of select="opening_times/thursday"/></p>
<p><xsl:value-of select="opening_times/friday"/></p>
<p><xsl:value-of select="opening_times/saturday"/></p>
<p><xsl:value-of select="opening_times/sunday"/></p>
</td>
</tr>
<tr>
<td><p>Christmas Offer:- <xsl:value-of select="christmas_offer"/></p></td>
<td><center><p>Overall Rating:- <xsl:value-of select="rating"/></p></center></td>
<td></td>
</tr>
</table>
</xsl:for-each>
</div>
<div data-role="footer">
<xsl:for-each select="listing/restaurant[restid ='rest8']">
<h4><xsl:value-of select="name"/></h4>
</xsl:for-each> 
</div><!-- /footer -->

</div>

<div data-role="page" id="rest9">

<div data-role="header">
<xsl:for-each select="listing/restaurant[restid ='rest9']">
<h1><xsl:value-of select="name"/></h1>
</xsl:for-each>
</div>
<div data-role="content">
<xsl:for-each select="listing/restaurant[restid ='rest9']">
<table border="1" cellspacing="10" cellpadding = "5">
<tr>
<td><img><xsl:attribute name="src"><xsl:value-of select="picture" /></xsl:attribute></img></td>
<td>
<p><xsl:value-of select="opening_times/monday"/></p>
<p><xsl:value-of select="opening_times/tuesday"/></p>
<p><xsl:value-of select="opening_times/wednesday"/></p>
<p><xsl:value-of select="opening_times/thursday"/></p>
<p><xsl:value-of select="opening_times/friday"/></p>
<p><xsl:value-of select="opening_times/saturday"/></p>
<p><xsl:value-of select="opening_times/sunday"/></p>
</td>
</tr>
<tr>
<td><p>Christmas Offer:- <xsl:value-of select="christmas_offer"/></p></td>
<td><center><p>Overall Rating:- <xsl:value-of select="rating"/></p></center></td>
<td></td>
</tr>
</table>
</xsl:for-each>
</div>
<div data-role="footer">
<xsl:for-each select="listing/restaurant[restid ='rest9']">
<h4><xsl:value-of select="name"/></h4>
</xsl:for-each>
</div><!-- /footer -->

</div>

<div data-role="page" id="rest10">

<div data-role="header">
<xsl:for-each select="listing/restaurant[restid ='rest10']">
<h1><xsl:value-of select="name"/></h1>
</xsl:for-each>
</div>
<div data-role="content">
<xsl:for-each select="listing/restaurant[restid ='rest10']">
<table border="1" cellspacing="10" cellpadding = "5">
<tr>
<td><img><xsl:attribute name="src"><xsl:value-of select="picture" /></xsl:attribute></img></td>
<td>
<p><xsl:value-of select="opening_times/monday"/></p>
<p><xsl:value-of select="opening_times/tuesday"/></p>
<p><xsl:value-of select="opening_times/wednesday"/></p>
<p><xsl:value-of select="opening_times/thursday"/></p>
<p><xsl:value-of select="opening_times/friday"/></p>
<p><xsl:value-of select="opening_times/saturday"/></p>
<p><xsl:value-of select="opening_times/sunday"/></p>
</td>
</tr>
<tr>
<td><p>Christmas Offer:- <xsl:value-of select="christmas_offer"/></p></td>
<td><center><p>Overall Rating:- <xsl:value-of select="rating"/></p></center></td>
<td></td>
</tr>
</table>
</xsl:for-each>
</div>
<div data-role="footer">
<xsl:for-each select="listing/restaurant[restid ='rest10']">
<h4><xsl:value-of select="name"/></h4>
</xsl:for-each>
</div><!-- /footer -->

</div>

</body>
</html>

</xsl:template>
</xsl:stylesheet>

Answer 1

您的javascript在初始化代码中有函数调用document.getElementById("map_canvas");考虑到生成该元素的样式表部分位于<xsl:for-each>块内，您的输出HTML可能有多个具有相同ID的元素。

很难确切地知道它会产生什么样的影响，但很可能它无法找到正确的div元素来放置地图。它将只返回其中一个，否则它将失败并显示错误，表明它不明确。无论哪种方式，你都不会得到你想要的地图。

无法使用XSLT和JQuery Mobile显示谷歌地图

1 个答案: