Не удается отобразить карты Google с помощью XSLT и JQuery Mobile - PullRequest
Новая
       48

Не удается отобразить карты Google с помощью XSLT и JQuery Mobile

0 голосов
/ 11 декабря 2011

Мне поставили задачу, частью которой является отображение карты Google на страницах, которые я создаю с помощью XSLT и JQuery mobile.Я посмотрел на несколько примеров, похожих на то, что я делаю, но они просто не будут работать для меня.Вот строки, связанные с моей текущей попыткой, кто-нибудь может сказать мне, почему карта не появится?Мой ожидаемый результат - отображение карты 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 голосов
/ 14 декабря 2011

Ваш javascript имеет вызов функции document.getElementById("map_canvas") в вашем коде инициализации; учитывая, что часть таблицы стилей, которая генерирует этот элемент, находится внутри блока <xsl:for-each>, вполне вероятно, что ваш выходной HTML имеет несколько таких элементов с одинаковым идентификатором.

Трудно точно знать, какой эффект это даст, но очень вероятно, что он не сможет найти правильный элемент div для размещения карты. Либо вернет только один из них, либо произойдет сбой с ошибкой, указывающей на его неоднозначность. В любом случае, вы не получите карты там, где хотите.

...