无法使Google地图与XSLT和JQuery Mobile一起显示

Question

我已经设置了一个任务，其中一部分是在使用XSLT和JQuery mobile创建的页面上显示google map。 我看过一些与我正在做的事类似的例子，但它们似乎对我没有用。 这是我当前尝试中涉及的内容，有人可以告诉我为什么地图不显示吗​​？ 我的预期结果是让Google地图显示在每个餐厅页面上定义的表格的单元格中。

<?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元素来放置地图。 它将只返回其中之一，否则将失败并显示一条错误消息，指示其含义不明确。 无论哪种方式，您都不会在想要的位置获得地图。