Question

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

当我这样做时，我得到了一个错误未捕获的TypeError：无法读取null的属性'offsetWidth'

我很确定我只是在js文件中遗漏了一些小东西，但对于我的生活，我无法弄清楚是什么

我确信在DOM准备好之前调用了JS，但我认为$（document）命令只会在DOM准备就绪时调用它

Answer 1

好的，感谢那些为此做出贡献的人。

我提供的代码块没有错误，CSS文件中有错误影响样式，因此没有正确显示地图

Javascript在线工作但不在外部工作

1 个答案: