Question

我的页面应该显示一个Google地图。

如果我将代码放在JSFiddle中，它可以正常工作。

我的所有文件都在同一目录中。我在Chrome和Firefox中测试过，都没有显示地图。所以我认为必须有一些关于我要求访问我的JavaScript和CSS的方式。

HTML

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="bob.css">
        <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    </head>
    <body>
        <h1>My Heading</h1>

        <div id="map"></div>

        <p>My paragraph.</p>

        <script type="text/javascript" src="bob.js"></script>
    </body>
</html>

bob.js

var mapOptions = {
    center: new google.maps.LatLng(37.7831,-122.4039),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

new google.maps.Map(document.getElementById('map'), mapOptions);

bob.css

html, body {
  height: 100%;
  margin: 0;
}

#map {
  height: 100%;
  margin: 0;
}

控制台输出

JavaScript Console

Answer 1

也许服务器（错误）以某种方式配置，以便相对路径不起作用。如果您的文件位于根目录中，那么绝对路径不会受到影响。

尝试：

<link rel="stylesheet" type="text/css" href="/bob.css">
<script type="text/javascript" src="/bob.js"></script>

Answer 2

我在firefox和chrome上都进行了测试，两者都运行顺畅。我假设你正在一个网站上测试这个（正如Johan Bouveng所说）可能有一些东西，所以我会尝试这样做：

<link rel="stylesheet" type="text/css" href="./bob.css">
<script type="text/javascript" src="./bob.js"></script>

./指向调用文件的完全相同的目录（在本例中为bob.html）

HTML文件将找不到JS和CSS文件

HTML

bob.js

bob.css

控制台输出

2 个答案: