0

Google マップ API に関する w3schools のコードをコピーしました。

<!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ボディをチェックしてください

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

</body>
于 2013-10-05T05:04:25.953 に答える
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ファイルが 1 つずつ読み込まれていることがわかります。

于 2013-10-05T05:08:59.467 に答える