我已经设置了一个任务，其中一部分是在使用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>

===============>>#1 票数：0

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

很难确切知道会产生什么效果，但是极有可能无法找到正确的div元素来放置地图。 它将只返回其中之一，否则将失败并显示一条错误消息，指示其含义不明确。 无论哪种方式，您都不会在想要的位置获得地图。

  ask by Nexus490 translate from so

未解决问题？本站智能推荐：

1回复

无法在jquery mobile中显示Google地图

您好，我正在尝试制作一个jQuery移动页面，该页面具有一个带有特定坐标的地图和几个可折叠项。 我从该站点（ http://jsfiddle.net/Gajotres/7kGdE/ ）获得了地图的代码，但是每当尝试尝试时，屏幕都会变成空白。 我也不想地图占据整个页面。 我希望它与可折叠项一
1回复

jQuery Mobile无法加载多个Google地图实例

我在一个带有jQuery mobile的cordova项目中工作，我需要多个地图。 问题在于，当加载地图时，另一个地图却没有，我知道那是因为我在需要时会触发API，但无法使它适用于多个地图。
1回复

jQuery mobile Google地图无法正确加载

我正在开发jQuery移动应用程序。 在这个应用程序中，我添加了带有自定义标记的google map。 因此，问题在于，如果我导航到带有地图的页面，则只会加载该地图的一小部分，但是如果我重新加载页面，则它可以正常工作。 这是我的标头代码，仅用于查看我使用的脚本： 这是页面内容代码
2回复

Google Maps和Jquery Mobile无法一起使用

这是我第一次使用jQuery和Google Maps。 这样，我从字面上复制并粘贴了Google Maps hello世界页面，并包括jQuery Mobile，而我只是得到一个空白页面，上面写着“正在加载”。 我准备好不确定为什么吗？ HTML和JS： 上面写着MYAPIKE
1回复

JQuery Mobile：无法更新谷歌地图

我们在（使用JQuery Mobile的手机差距）中有一个基于位置的应用程序，它应该加载谷歌地图，并带有显示该地点位置的标记。 第一次加载后，地图不会刷新。 我想根据地址显示不同的位置。 即使我使用死亡，现场似乎也没有解除束缚。 这是代码。 function loadMap(i
2回复

jQuery Mobile谷歌地图，我必须刷新页面才能显示地图

我正在制作一个在地图上显示位置的应用程序，我有一个链接到地图的页面，当我单击该链接时，将其更改为地图页面而不加载地图。 因此，我必须单击浏览器的“后退”按钮并刷新具有链接的页面，此后，我再次单击该链接，此时将加载地图，因此如果您可以帮助我在不刷新的情况下加载地图，感激 而map3.
1回复

jQuery Mobile和Google Maps API-无法在设备上加载地图

我正在构建一个移动应用程序，它是一个活动程序。 我想链接到一个页面，该页面在Google地图上显示事件的位置，但不知道如何使其工作。 当您直接链接到页面（或重新加载页面）时，它可以很好地在浏览器和设备上加载，但是当我通过应用程序转到页面时，地图不会出现。 我很确定这与通过ajax加载的
2回复

无法将Google静态地图加载到jQuery mobile中的div中

我正在尝试将Google静态地图图像加载到JQM中的div中。在萤火虫中，我可以看到图像正在下载。 它还显示了一个错误，指出非法字符PNG 任何建议的帮助，不胜感激。
4回复

如何使用jQuery Mobile显示全屏谷歌地图？

以下代码显示奇怪的输出。 我应该看一个全屏移动地图。 但出于某种原因，它只显示在屏幕的一部分上。 我正在使用jquery.ui.map进行映射。 输出： 提前致谢。
1回复

jQuery触摸无法在移动应用上显示地图

我正在尝试开发一个应使用Google Maps API显示地图的应用程序。 但我无法使其与最新的候选版本一起使用。 我得到了这个婴儿床，但与较旧的版本一起使用。 我将它放在此jsFiddle中，以便您可以实时查看它。 http://jsfiddle.net/huqY3/ 提前致谢