0

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

如果我将代码放在 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>

鲍勃.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);

鲍勃.css

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

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

控制台输出

JavaScript 控制台

4

2 回答 2

1

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

尝试：

<link rel="stylesheet" type="text/css" href="/bob.css">
<script type="text/javascript" src="/bob.js"></script>
于 2013-07-17T12:41:07.637 回答
0

我在 Firefox 和 chrome 上都进行了测试，都运行顺利。我假设你正在一个网站上测试这个，所以（正如 Johan Bouveng 所说）可能会有一些磨损，所以我会尝试这个：

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

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

于 2013-07-17T12:59:27.750 回答