10

我有一个 XML，它通过 XSLT 转换为 HTML。XML 能够包含 JavaScript，并且它可以正确地将其转换为 HTML，就像我在许多其他页面中所做的那样。它只是不适用于 GoogleMaps，我怀疑我的 JavaScript 在某处有问题。

生成的 HTML 的相关部分如下所示。

HTML/脚本中发生了什么：

  • API 是从 googleapis.com 加载的
  • 创建了一个 ID 为 map_canvas 的 div。
  • 定义了一个函数 start()，它通过<body onload="start();">.
  • 在这个函数中，创建了一个变量 map_canvas 并将引用传递给名为 map_canvas 的 div 对象。
  • 为了控制这一步是否有效，我给 div 赋予了新的背景颜色红色。
  • 有用。
  • 接下来，我想创建变量 var_options 并为 center、zoom 和 mapTypeId 设置初始值。
  • 为了控制这一步是否有效，我给 div 赋予了新的背景颜色蓝色。
  • 这不起作用，它保持红色。
  • 因此，该指令没有被执行。
  • 所以我检查我是否可以访问该对象google.maps。
  • 如果是这样，我给 div 新的背景颜色为绿色。
  • 这有效，所以我可以访问这个对象。
  • 交叉检查：如果我注释掉加载 API 的语句，颜色不会改变。

对我来说，这看起来像下面的某个地方有问题。

    var map_options = {
        center: new google.maps.LatLng(44.54, -78.54),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

但几个小时后，我仍然无法弄清楚它是什么。

<html>
    <head>
        ...
        <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript">
        </script>

        <script type="text/javascript">
        function start()
        {   
            var map_canvas = document.getElementById('map_canvas');

// If the element can be located, we make it green. Checked.
// If we give the function another name than start, it won't be executed. Checked.
map_canvas.style.backgroundColor = 'green';

            if(typeof google.maps != 'undefined') {
// If the google.maps object exists, we make the canvas red. Checked.
// If the API was not loaded from googleapis (commented out), it will stay green. 
map_canvas.style.backgroundColor = 'red';
            }

// So why does the following not work?
            var map_options = {
                center: new google.maps.LatLng(44.54, -78.54),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
// Not arriving here:
map_canvas.style.backgroundColor = 'blue';

// Before going on, I want to solve above problem, so this is commented out.
//            var map = new google.maps.Map(map_canvas, map_options);
// map_canvas.style.backgroundColor = 'black';
        }
        </script>
    </head>


    <body onload="start();">
        ...
        <div style="width: 400px; height: 224px;" id="map_canvas"></div>
        ...
    </body>
</html>
4

3 回答 3

14

我发现这个错误的最常见原因仅仅是一个无效的 img src。

于 2013-11-03T01:28:20.637 回答
5

我找到了这个谷歌页面（webarchive）。不过，它似乎没有记录。点击按钮。适用于 FF 和 IE。查看标记和 Javascript，它通过回调加载地图。

谢谢你让我走上正轨。

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Dynamic Loading</title>
<script type="text/javascript">
  function handleApiReady() {
    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);
  }

  function appendBootstrap() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=handleApiReady";
    document.body.appendChild(script);
  }
</script>
</head>
<body style="margin:0px; padding:0px;">
  <input type="button" value="Load Bootstrap + API" onclick="appendBootstrap()">
  <div id="map_canvas" style="width:400px; height:400px"></div>
</body>
</html>
于 2013-06-20T15:00:20.877 回答
4

我的错误是类似的（这就是我发现这篇文章的原因），但仅在 Internet Explorer（版本 11）中：

File: eval code (401), Line: 39, Column: 304

这是因为我使用 svg-images 作为标记：

var marker = map.addMarker({
    lat: position.coords.latitude,
    lng: position.coords.longitude,
    icon : {
        url : '/images/marker.svg'
    }
});

切换到 png-images 而不是 svg 解决了我的问题！

于 2014-10-28T13:55:40.867 回答