所以我无法解决这个问题。我试图将XML值分配给javascript,以便请求Google地图。这是每个位置的内部,因此我可以为每个位置显示一张小地图。请帮忙。 编辑:我上传了整个XSL文件,其中包含其他一些问题,例如CSS混乱以及手风琴问题。但我的主要重点是底部的javascript问题。使用的XML数据是事件的字典,我正尝试调用存储的LAT和LNG,以便我可以针对每个事件位置生成一个Google地图。谢谢。
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" version="5.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="/">
<html>
<head>
<title>XSL</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poiret+One" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="font-family: 'Poiret One', cursive; font-weight: bold; background-image: url(png/BG01dark.jpg);
background-size: cover; background-position: center; background-repeat: none; background-attachment: fixed;">
<div class="container">
<center><font style="color: white; font-size: 50px; text-shadow: 2px 2px 3px #000000;">
Impulse</font></center>
<center><p><font style="color: white; font-size: 20px; text-shadow: 1px 1px 1px #000000;">
Your friendly computer science event organizer</font></p></center>
<div class="panel-group" id="accordion">
<xsl:for-each select="all/*">
<div class="panel panel-default" style="background: rgba(255,255,255.75);" >
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2">
<xsl:if test="Type = 'Careers'">
<img style="background: rgba(255,255,255.75); width:45px; height:45px;
border: 3px solid green; border-radius: 10px; padding: 7px;"
src="png/career.png" alt="Careers">Careers</img>
</xsl:if>
<xsl:if test="Type = 'Database'">
<img style="background: rgba(255,255,255.75); width:45px; height:45px;
border: 3px solid blue; border-radius: 10px; padding: 7px;"
src="png/database.png" alt="Database">Database</img>
</xsl:if>
<xsl:if test="Type = 'Game Dev'">
<img style="background: rgba(255,255,255.75); width:45px; height:45px;
border: 3px solid red; border-radius: 10px; padding: 7px;"
src="png/gamepad.png" alt="Game Development">Game Dev</img>
</xsl:if>
<xsl:if test="Type = 'Mobile App'">
<img style="background: rgba(255,255,255.75); width:45px; height:45px;
border: 3px solid purple; border-radius: 10px; padding: 5px;"
src="png/mobile.png" alt="Mobile Development">Mobile Dev</img>
</xsl:if>
<xsl:if test="Type = 'Networking'">
<img style="background: rgba(255,255,255.75); width:45px; height:45px;
border: 3px solid yellow; border-radius: 10px; padding: 7px;"
src="png/networking.png" alt="Networking">Networking</img>
</xsl:if>
<xsl:if test="Type = 'Robotics'">
<img style="background: rgba(255,255,255.75); width:45px; height:45px;
border: 3px solid #FF6D14; border-radius: 10px; padding: 7px;"
src="png/robot.png" alt="Robotics">Robotics</img>
</xsl:if>
<xsl:if test="Type = 'Cyber Security'">
<img style="background: rgba(255,255,255.75); width:45px; height:45px;
border: 3px solid aqua; border-radius: 10px; padding: 7px;"
src="png/security.png" alt="Cyber Security">Cyber Security</img>
</xsl:if>
<xsl:if test="Type = 'Teach Code'">
<img style="background: rgba(255,255,255.75); width:45px; height:45px;
border: 3px solid #FFB34C; border-radius: 10px; padding: 7px;"
src="png/teach.png" alt="Teach Code">Teach Code</img>
</xsl:if>
<xsl:if test="Type = 'Alt Reality'">
<img style="background: rgba(255,255,255.75); width:45px; height:45px;
border: 3px solid #8D301D; border-radius: 10px; padding: 7px;"
src="png/vr.png" alt="Alternate Reality">Alt Reality</img>
</xsl:if>
<xsl:if test="Type = 'Web Dev'">
<img style="background: rgba(255,255,255.75); width:45px; height:45px;
border: 3px solid #35405A; border-radius: 10px; padding: 7px;"
src="png/webdev.png" alt="Website Development">Web Dev</img>
</xsl:if >
<object hspace="20" style="font-weight: bold;"><xsl:value-of select="name()"/></object>
<object align="right" style="font-weight: bold;"><xsl:value-of select="Date"/></object>
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<div>Event details go here</div>
<br></br>
<div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Sponsor: </span><xsl:value-of select="Sponsor"/></div>
<div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Image: </span><xsl:value-of select="Image"/></div>
<div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Description: </span><xsl:value-of select="Description"/></div>
<div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Address: </span><xsl:value-of select="Location/Address"/></div>
<div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Room: </span><xsl:value-of select="Location/Room"/></div>
<div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Time: </span><xsl:value-of select="Time"/></div>
<div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">RSVP: </span><xsl:value-of select="RSVP_Link"/></div>
<div>
<script type="text/javascript">
function initMap() {
var location = {lat: "<xsl:value-of select="Location/Coordinates/LAT" disable-output-escaping="yes"/>",
lng: "<xsl:value-of select="Location/Coordinates/LON" disable-output-escaping="yes"/>"};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: location
});
var marker = new google.maps.Marker({
position: location,
map: map
});
}
</script>
<script async="async" defer="defer"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAJQ0BsjJqHv3AoJc35A&callback=initMap">
</script>
</div>
</div>
</div>
</div>
</xsl:for-each>
</div>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>