Question

我从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>

但它似乎无法正常工作

Answer 1

代码中遗漏的重要部分。检查你的HtML主体

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

</body>

Answer 2

这是工作代码，

<强> 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文件。

Javascript google Maps api在单独的文件中不起作用

2 个答案: