Question

今天早上我试图实现谷歌地图，但是当我加载我的页面时，没有显示任何内容。代码如下所示。

<?php

?>

<!--===========================HTML==========================-->
<!DOCTYPE html>
<html>
  <head>
    <style>
      #map_canvas {
        width: 500px;
        height: 400px;
      }
    </style>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
      function initialize() {
        var map_canvas = document.getElementById('map_canvas');
        var map_options = {
          center: new google.maps.LatLng(44.5403, -78.5463),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(map_canvas, map_options)
      }
      google.maps.event.addDomListener(window, ‘load’, initialize);
    </script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>

请让我知道此代码有什么问题

Answer 1

这是一个棘手的问题，但我已经知道了：这是你的引用。第24行的JavaScript错误为Uncaught SyntaxError: Unexpected token ILLEGAL。

字符串load周围的引号是JavaScript无法识别的字符集的一部分。所以：

google.maps.event.addDomListener(window, ‘load’, initialize);

应改为：

google.maps.event.addDomListener(window, 'load', initialize);

我已经用一个替代品测试了你的代码，它可以根据需要运行。

Answer 2

要进一步添加到Amal Murali's answer，请在以下行中添加不规则单引号 ‘ ’：

google.maps.event.addDomListener(window, ‘load’, initialize);

需要更改为：

google.maps.event.addDomListener(window, 'load', initialize);

使用时：<body onload="initialize();">（根据Amal Murali的建议）

最可能的原因：

错误本身来自于从互联网复制/粘贴代码，可能会发生。

如何防止这种情况：

最好仔细检查从外部来源获取的代码。

完全固定的代码：（现在可以安全地复制/粘贴）

<?php

?>

<!--===========================HTML==========================-->
<!DOCTYPE html>
<html>
  <head>
    <style>
      #map_canvas {
        width: 500px;
        height: 400px;
      }
    </style>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
      function initialize() {
        var map_canvas = document.getElementById('map_canvas');
        var map_options = {
          center: new google.maps.LatLng(44.5403, -78.5463),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(map_canvas, map_options)
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body onload="initialize();">
    <div id="map_canvas"></div>
  </body>
</html>

Answer 3

试试这个

function initialize() {
        latlng1 = new google.maps.LatLng(44.5403, -78.5463);
        options = { zoom: 8, center: latlng1, mapTypeId: google.maps.MapTypeId.ROADMAP };
        map = new google.maps.Map(document.getElementById("map_canvas"), options);
    }

在您的代码中，您需要更改语法

      google.maps.event.addDomListener(window, 'load', initialize);

并且@Amal表示只有当它调用

这样的页面加载时它才会起作用

<body onload="initialize();">

Google地图未显示

3 个答案: