0

我从 w3schools 复制了一段关于 google maps api 的代码。

<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
function initialize()
{
var mapProp = {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>

</body>
</html>

当我将它放在我的 html 文件中时，它可以工作。

但是，如果我尝试将这段代码放在 javascript 文件中

function initialize()
{
var mapProp = {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

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

这没用

在我的html里面是

    <script
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
    </script>
<script src = "~/Scripts/JScript.js"> </Script>

我也试过把这个功能拿出来

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

成为

    <script
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
    </script>
<script src = "~/Scripts/JScript.js"> google.maps.event.addDomListener(window, 'load', initialize);</Script>

但这似乎不起作用

4

2 回答 2

1

这是工作代码，

HTML

map.html

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
        <script src="map.js"></script>
        <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">

        </script>
    </head>

    <body>
        <div id="googleMap" style="width:500px;height:380px;"></div>

    </body>
</html>

JS

map.js

function initialize()
{
    var mapProp = {
        center:new google.maps.LatLng(51.508742,-0.120850),
        zoom:5,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    var map=new google.maps.Map(document.getElementById("googleMap")
        ,mapProp);
}

$(document).ready(function(){
    initialize();
});

包含script标签的顺序很重要。js文件按它们包含的顺序加载

如果你检查你的控制台，你可以看到每个js文件都被一个一个地加载。

于 2013-10-05T05:08:59.467 回答
1

您的代码中缺少重要的部分。检查您的 HTML 正文

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>

</body>
于 2013-10-05T05:04:25.953 回答