1

私はJSとJqueryにかなり慣れていないので、誰かが助けてくれるかどうか疑問に思っています:)

私はこの次のコードを使用してマップを作成していますが、インラインで正常に動作します

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Google Map with GPX track</title>
<style type="text/css">
  html, body, #map_display { width: 100%; height: 100%; margin: 0; padding: 0 }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
  function gpx() {
    var map = new google.maps.Map(document.getElementById("map_display"), {
      mapTypeId: google.maps.MapTypeId.HYBRID
    });

    $.ajax({
     type: "GET",
     url: "/alan.gpx",
     dataType: "xml",
     success: function(xml) {
       var points = [];
       var bounds = new google.maps.LatLngBounds ();
       $(xml).find("trkpt").each(function() {
         var lat = $(this).attr("lat");
         var lon = $(this).attr("lon");
         var p = new google.maps.LatLng(lat, lon);
         points.push(p);
         bounds.extend(p);


       });

       var route = new google.maps.Polyline({

         path: points,
         strokeColor: "#FF00AA",
         strokeOpacity: .7,
         strokeWeight: 4
       });

       route.setMap(map);


       map.fitBounds(bounds);
     }
    });
  }
</script>
</head>

<body onload="gpx()">
  <div id="map_display"></div>
</body>
</html>

これを外部の.jsファイルに入れようとしていますが、うまくいきません

これは JS ファイルです。スクリプトが呼び出されていることを知らせるアラートが表示されます。

alert ("hello from script");

function gpx() {
    var map = new google.maps.Map(document.getElementById("map_display"), {
      mapTypeId: google.maps.MapTypeId.TERRAIN
    });

    $.ajax({
     type: "GET",
     url: "alan.gpx",
     dataType: "xml",
     success: function(xml) {
       var points = [];
       var bounds = new google.maps.LatLngBounds ();
       $(xml).find("trkpt").each(function() {
         var lat = $(this).attr("lat");
         var lon = $(this).attr("lon");
         var p = new google.maps.LatLng(lat, lon);
         points.push(p);
         bounds.extend(p);
       });

       var poly = new google.maps.Polyline({
         // use your own style here
         path: points,
         strokeColor: "#FF00AA",
         strokeOpacity: .7,
         strokeWeight: 4
       });

       poly.setMap(map);

       // fit bounds to track
       map.fitBounds(bounds);
     }
    });
  }
$(document).on("ready", gpx);

私が使用しているhtmlファイルは

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Import GPX file to Google Maps</title>
<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>
  <div id="map_display"></div>
</body>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="ac-gpxscript.js"></script>
</html>

これを行うと、 Uncaught TypeError: Cannot read property 'offsetWidth' of null というエラーが返されます

私はjsファイルに何か小さなものが欠けていると確信していますが、私の人生ではもう何がわからないのですか

DOM の準備が整う前に JS が呼び出されていることは確かですが、$(document) コマンドは DOM の準備ができたときにのみ呼び出されると思いました

4

1 に答える 1