如何在 XSLT 中将参数传递给 Google Maps initmap? [英] How to pass parameters to Google Maps initmap in XSLT?
问题描述
我试图通过 xslt 样式表从 xml 文档中获取纬度和经度来获取位置.我创建了 xslt 变量，当我调用它们时返回正确的纬度和经度(例如使用 xsl:value-of).但我似乎无法访问 javascript snipet 中的相同变量.从我读到的内容来看，可以在 javascript 中调用 xslt 变量.所以我不知道我做错了什么.
这是我的代码:
<xsl:for-each-group select="MBMDVRs/LocatorInfo" group-by="string-join((LocationAddr/StreetNum, ' ', LocationAddr/StreetName, ' ', LocationAddr/City,' ', LocationAddr/StateProv, ' ', LocationAddr/PostalCode), '!')"><tr style="border-collapse:collapse; font-size:inherit; text-align:center; " class="wide"><td class="rownr{(position() + 1) mod 2}" style="width:0.95in; "></td><td class="rownr{(position() + 1) mod 2}" style="width:2.57in; "><xsl:value-of select="LocationAddr/StreetNum, ' ', LocationAddr/StreetName, ' ', LocationAddr/mbg:City, ' ', LocationAddr/StateProv, LocationAddr/PostalCode"/> &;#160;<xsl:variable name="Latitude" select="LocationAddr/GEOCode/mbg:Latitude"/><xsl:variable name="Longitude" select="LocationAddr/mbg:GEOCode/Longitude"/><脚本>函数 initMap(){var location = {lat: parseFloat("<xsl:value-of select="$Latitude"/>"),lng: parseFloat("<xsl:value-of select="$Longitude"/>")};var map = new google.maps.Map(document.getElementById("map"), {zoom: 15, center: location});var 标记 = 新的 google.maps.Marker({位置:位置，地图:地图});}<a href="#" onclick="initMap()">街景</a></td><td class="rownr{(position() + 1) mod 2}" style="width:1.82in; "><xsl:copy-of select="(//LocationTimestamp)[last()]"/></td><td class="rownr{(position() + 1) mod 2}" style="width:1.82in; "><xsl:copy-of select="(//LocationTimestamp)[1]"/></td><td class="rownr{(position() + 1) mod 2}" style="width:2.27in; "><xsl:value-of select="count(current-group())"/></td></tr></xsl:for-each-group></tbody>我正在尝试在此 div 中显示结果:
并使用此链接:
并使用这个 xml:
<位置地址><StreetNum>187</StreetNum><街道名称>东大街</街道名称><城市>福尔里弗</城市><StateProv>MA</StateProv><邮政编码>02723</邮政编码><国家>美国</国家><地理代码><纬度>41.694600119635915</纬度><经度>-71.13038416718094</经度></GEOCode></LocationAddr><LocationTimestamp>4/7/2018 7:00:03 AM</LocationTimestamp><LocationDistance>4.338 英里</LocationDistance><准确度>1.985英里</准确度></LocatorInfo> 我认为您需要更改您的 Javascript 代码以拥有一个您可以调用的函数来创建适当的地图和标记，因此在您放置的任何分组之外
>
<脚本>函数 showMap(targetElement, location) {var map = new google.maps.Map(targetElement, { zoom: 15, center: location });var 标记 = 新的 google.maps.Marker({位置:位置，地图:地图});}然后在您使用的分组内
<a href="#" onclick="showMap(document.getElementById('map'), {{ lat: {GEOCode/Latitude}, lng: {GEOCode/Longitude} }}); returnfalse;">街景</a>这应该解决我认为的问题，就 XSLT 和 HTML 文档中生成的脚本代码的交互而言.
我不知道每次调用函数时不使用 new google.maps.Map 是否会更容易/更快，而可能只移动中心和标记(或删除现有标记并在最初创建的地图中创建一个新的)，但这里是您实现第一个脚本块的方法:
<脚本>无功映射 = 空；var 标记 = 空；函数 showMap(targetElement, location) {如果(地图！= null){map.setCenter(location);标记.setPosition(位置)；}别的 {map = new google.maps.Map(targetElement, { zoom: 15, center: location });标记 = 新的 google.maps.Marker({位置:位置，地图:地图});}}I'm trying to get the position by getting the latitude and longitude from an xml document, through an xslt stylesheet. I made xslt variables which return the correct latitude and longitude when I call them (for example with xsl:value-of). But I can't seem to access the same variables in the javascript snipet. From what I read it's possible to call an xslt variable inside javascript. So I don't know what I'm doing wrong.
Here is my code:
<xsl:for-each-group select="MBMDVRs/LocatorInfo" group-by="string-join((LocationAddr/StreetNum, ' ', LocationAddr/StreetName, ' ', LocationAddr/City, ' ', LocationAddr/StateProv, ' ', LocationAddr/PostalCode), '!')">
<tr style="border-collapse:collapse; font-size:inherit; text-align:center; " class="wide">
<td class="rownr{(position() + 1) mod 2}" style="width:0.95in; ">
</td>
<td class="rownr{(position() + 1) mod 2}" style="width:2.57in; ">
<xsl:value-of select="LocationAddr/StreetNum, ' ', LocationAddr/StreetName, ' ', LocationAddr/mbg:City, ' ' , LocationAddr/StateProv, LocationAddr/PostalCode" />  
<xsl:variable name="Latitude" select="LocationAddr/GEOCode/mbg:Latitude"/>
<xsl:variable name="Longitude" select="LocationAddr/mbg:GEOCode/Longitude"/>
<script>
function initMap(){
var location = {lat: parseFloat("<xsl:value-of select="$Latitude"/>"),
lng: parseFloat("<xsl:value-of select="$Longitude"/>")};
var map = new google.maps.Map(document.getElementById("map"), {zoom: 15, center: location
});
var marker = new google.maps.Marker({
position: location,
map: map
});
}
</script>
<a href="#" onclick="initMap()">Street View</a>
</td>
<td class="rownr{(position() + 1) mod 2}" style="width:1.82in; ">
<xsl:copy-of select="(//LocationTimestamp)[last()]"/>
</td>
<td class="rownr{(position() + 1) mod 2}" style="width:1.82in; ">
<xsl:copy-of select="(//LocationTimestamp)[1]"/>
</td>
<td class="rownr{(position() + 1) mod 2}" style="width:2.27in; ">
<xsl:value-of select="count(current-group())" />
</td>
</tr>
</xsl:for-each-group>
</tbody>
</table>
I'm trying to display the result in this div:
And use this link:
And use this xml:
<LocatorInfo>
<LocationAddr>
<StreetNum>187</StreetNum>
<StreetName>Eastern Avenue</StreetName>
<City>Fall River</City>
<StateProv>MA</StateProv>
<PostalCode>02723</PostalCode>
<Country>USA</Country>
<GEOCode>
<Latitude>41.694600119635915</Latitude>
<Longitude>-71.13038416718094</Longitude>
</GEOCode>
</LocationAddr>
<LocationTimestamp>4/7/2018 7:00:03 AM</LocationTimestamp>
<LocationDistance>4.338 miles</LocationDistance>
<Accuracy>1.985 miles</Accuracy>
</LocatorInfo>
I think you need to change your Javascript code to have a function you can call to create the appropriate map and marker, so outside of any grouping you put
<script>
function showMap(targetElement, location) {
var map = new google.maps.Map(targetElement, { zoom: 15, center: location });
var marker = new google.maps.Marker({
position: location,
map: map
});
}
</script>
then inside of your grouping you use
<a href="#" onclick="showMap(document.getElementById('map'), {{ lat: {GEOCode/Latitude}, lng: {GEOCode/Longitude} }}); return false;">Street View</a>
that should solve the problem I think, in terms of interaction of XSLT and generated script code in an HTML document.
I don't know whether it would be easier/faster to not use new google.maps.Map each time the function is called and instead perhaps only move the center and the marker (or delete the existing marker and create a new) in an initially created map, but here is how you would implement that first script block instead:
<script>
var map = null;
var marker = null;
function showMap(targetElement, location) {
if (map != null) {
map.setCenter(location);
marker.setPosition(location);
}
else {
map = new google.maps.Map(targetElement, { zoom: 15, center: location });
marker = new google.maps.Marker({
position: location,
map: map
});
}
}
</script>
这篇关于如何在 XSLT 中将参数传递给 Google Maps initmap?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
