javascript - 为 Javascript 赋值时未转义的 XML 字符
问题描述
所以我无法解决这个问题。我正在尝试将 XML 值分配给 javascript 以请求谷歌地图。这是每个位置的内部，因此我可以为每个位置显示一张小地图。请帮忙。编辑：我上传了整个 XSL 文件，其中有一些其他问题，例如 CSS 的混乱和手风琴问题。但我的主要关注点是底部的 javascript 问题。正在使用的 XML 数据是一个事件字典，我试图调用存储的 LAT 和 LNG，以便我可以为每个事件位置生成一个谷歌地图。谢谢你。
<?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>
解决方案
推荐阅读
- java - 使用 xuggler 从文件中读取视频时抛出“EXCEPTION_ACCESS_VIOLATION”
- php - 每分钟都在更改并从每天遵循随机路径的数组中获取数据
- java - org.springframework.beans.factory.UnsatisfiedDependencyException：创建名为“solrDocumentController”的bean时出错
- ansible - 如何使用特定于操作系统的变量运行任务？
- verilog - 为什么在 Verilog 模拟中，某些分配存在多个驱动程序问题，而其他分配则没有
- python - Fedora30 上的 libpq.so.5 和 PQencryptPasswordConn 版本 RHPG_10 的问题
- powershell - 为什么我会收到输入 VMID 无法解析为单个虚拟机的错误？
- java - 如何使用 WS-Discovery 规范在 Java 中发现网络上的 ONVIF 设备？
- sql-server - 在这种情况下使用什么查询 - sqlServer
- java - 在 2 个数组列表之间传递值