Question

我正在尝试在使用XLS转换生成的HTML页面中包含GoogleMap v3（v2的一切正常）。我的JS代码来自this page。

基本上，根据示例，当所有内容都是纯HTML时，地图正常工作，但是当我尝试将其包含在XSL样式表中时，Firefox（v3.6）会抱怨并且不想加载任何内容：< / p>

错误：未捕获异常：[例外...“不支持操作”代码：“9”nsresult：“0x80530009（NS_ERROR_DOM_NOT_SUPPORTED_ERR）”位置：“http://maps.google.com/maps/api/js?sensor=false行：9”]

错误：google.maps.LatLng不是构造函数   源文件：file：///home/kevin/google/data.xml   行：2

以下是我正在使用的XSL代码的简化版本：

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE xsl:stylesheet >
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="/">
    <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>Google Maps JavaScript API v3 Example: Map Simple</title>
         <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
         <script type="text/javascript">
      function initialize() {
      var myLatlng = new google.maps.LatLng(-34.397, 150.644);
      var myOptions = {
      zoom: 8,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      }
         </script>
      </head>
      <body onload="initialize()">
        <div id="map_canvas"></div>
       </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

和一个触发转换的极简主义XML文档：

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE xsl:stylesheet>
<?xml-stylesheet type="text/xsl" href="Display.xsl"?>
<root />

根据我的谷歌调查，问题可能来自错误的Doctype，但我真的不知道如何解决它，像

这样的功能

<xsl:output method="html"
    indent="yes"
    omit-xml-declaration="yes"
    encoding="utf-8"
    doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
    doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />

不要改变任何东西。

编辑：对于XML，我的实际DOCTYPE稍微更完善：

<!DOCTYPE xsl:stylesheet  [<!ENTITY auml   "&#228;" ><!ENTITY ouml   "&#246;" ><!ENTITY uuml   "&#252;" ><!ENTITY szlig  "&#223;" ><!ENTITY Auml   "&#196;" ><!ENTITY Ouml   "&#214;" ><!ENTITY Uuml   "&#220;" ><!ENTITY euml   "&#235;" ><!ENTITY ocirc  "&#244;" ><!ENTITY nbsp   "&#160;" ><!ENTITY Agrave "&#192;" ><!ENTITY Egrave "&#200;" ><!ENTITY Eacute "&#201;" ><!ENTITY Ecirc  "&#202;" ><!ENTITY egrave "&#232;" ><!ENTITY eacute "&#233;" ><!ENTITY ecirc  "&#234;" ><!ENTITY agrave "&#224;" ><!ENTITY iuml   "&#239;" ><!ENTITY ugrave "&#249;" ><!ENTITY ucirc  "&#251;" ><!ENTITY uuml   "&#252;" ><!ENTITY ccedil "&#231;" ><!ENTITY AElig  "&#198;" ><!ENTITY aelig  "&#330;" ><!ENTITY OElig  "&#338;" ><!ENTITY oelig  "&#339;" ><!ENTITY euro   "&#8364;"><!ENTITY laquo  "&#171;" ><!ENTITY raquo  "&#187;" >]>

和XSL：

<!DOCTYPE xsl:stylesheet  [
  <!ENTITY % xhtml-lat1 SYSTEM
     "http://www.w3.org/TR/xhtml1/DTD/xhtml-lat1.ent">
  <!ENTITY % xhtml-special SYSTEM
     "http://www.w3.org/TR/xhtml1/DTD/xhtml-special.ent">
  <!ENTITY % xhtml-symbol SYSTEM
     "http://www.w3.org/TR/xhtml1/DTD/xhtml-symbol.ent">
  %xhtml-lat1;
  %xhtml-special;
  %xhtml-symbol;
  ]>

正确处理我的所有口音和特殊字符，所以我想避免摆脱它，如果可能的话

编辑2 ：问题实际上与我尝试通过Mapstraction API加载OpenStreetMap完全一样，document.write是不允许的。

当我使用回调函数时Google Map v2正常工作的另一件事是：

http://maps.google.com/maps?file=api&v=2.x&key={myKey}&c&async=2&callback={myInitFunct}

关于什么可能出错的任何线索？

Answer 1

解决方案是使用GoogleMap API的callback参数：

http://maps.google.com/maps/api/js?sensor=false&callback= {myInitFunction}

实际上，正如我们在生成的JS脚本中看到的那样，它们不会以相同的方式插入代码：

使用回调：

function getScript(src) {
    var s = document.createElement('script');

    s.src = src;
    document.body.appendChild(s);
  }

没有回调：

function getScript(src) {
document.write('<' + 'script src="' + src + '"' +
               ' type="text/javascript"><' + '/script>');
}

可能禁止document.write ......

（但是，我真的不明白为什么他们为同一个动作使用两个不同的代码，可能只是为了解决我们的问题：）

感谢this blog的教程

Answer 2

声明样式表DOCTYPE的正确方法：

<!DOCTYPE xsl:stylesheet [ 
  <!ENTITY % HTMLlat1 PUBLIC
       "-//W3C//ENTITIES Latin 1 for XHTML//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml-lat1.ent">
  %HTMLlat1;
  <!ENTITY % HTMLspecial PUBLIC
        "-//W3C//ENTITIES Special for XHTML//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml-special.ent">
  %HTMLspecial;
  <!ENTITY % HTMLsymbol PUBLIC
        "-//W3C//ENTITIES Symbols for XHTML//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml-symbol.ent">
  %HTMLsymbol;
]>

Answer 3

这里的问题是FF中的XSLT输出不像静态HTML。

在静态HTML页面中，同步加载GMap脚本，以便在body.onload事件触发时，脚本已经加载。

在XSLT输出中，当body.onload触发时，脚本仍在加载。

我以这种方式解决了这个问题（以下是XSLT输出）：

<html>
<head>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;callback=onLoadCode"></script>
    <script type="text/javascript">
        function onLoadMaps()
        {
            /// init the maps here
        }

        var zOnLoadCode = false;
        var zOnLoadBody = false;
        function onLoadCode() { zOnLoadCode = true; }
        function onLoadBody() { zOnLoadBody = true; }
        var onLoadTimer = window.setInterval(function() {
            if(zOnLoadCode && zOnLoadBody) {
                window.clearInterval(onLoadTimer);
                onLoadMaps();
            }
        },100,"javascript");
    </script>
</head>
<body onload="onLoadBody();">
    <!-- put your maps here -->
</body>

也就是说，我使用了GMap回调URL参数来指示何时加载脚本，并在页面准备好时发出body.onload事件信号，然后我等到两者都被触发。

XSLT，Doctype和Google-Map v3无效

3 个答案: