谷歌API路徑不顯示

我想從JSON文件創建一個路徑，我無法得到顯示的路徑。控制檯中沒有錯誤或指示，爲什麼這是。除getJSON循環外，此代碼直接來自Google Example。當我嘗試將新的座標對推入數組時，出現了問題。谷歌API路徑不顯示

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Simple Polylines</title> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
    <script> 
     function initialize() { 
     var mapOptions = { 
      zoom: 3, 
      center: new google.maps.LatLng(0, -180), 
      mapTypeId: google.maps.MapTypeId.TERRAIN 
     }; 

     var map = new google.maps.Map(document.getElementById('map-canvas'), 
      mapOptions); 

     var routeCoordinates = []; 

     $.getJSON('Tour_Down_Under_Stage_One.json', function(data) { 
      for (var i in data.points) { 
       coordinates = new google.maps.LatLng(data.points[i].latitude, data.points[i].longitude) 
       routeCoordinates.push(coordinates); 
      } 
     }); 

     var route = new google.maps.Polyline({ 
      path: routeCoordinates, 
      geodesic: true, 
      strokeColor: '#FF0000', 
      strokeOpacity: 1.0, 
      strokeWeight: 2 
     }); 

     route.setMap(map); 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    </body> 
</html>

這就是文件的樣子。我知道它解析正確，因爲我可以console.log數據就好了。這是構建數組的東西。

{ 
    "points": [ 
     { 
     "distance": 0.0, 
     "latitude": -34.964927695699998, 
     "longitude": 138.647018457, 
     "elevation": 169.94999999999999 
     }, 
     { 
     "distance": 0.0, 
     "latitude": -34.964927695699998, 
     "longitude": 138.647018457, 
     "elevation": 169.94999999999999 
     }, 
     { 
     "distance": 8.1500000000000004, 
     "latitude": -34.964965833400001, 
     "longitude": 138.647094732, 
     "elevation": 170.0 
     }, 
     { 
     "distance": 17.93, 
     "latitude": -34.965011598499999, 
     "longitude": 138.64718626300001, 
     "elevation": 170.06999999999999 
     }, 
     { 
     "distance": 27.079999999999998, 
     "latitude": -34.965064991299997, 
     "longitude": 138.64726253800001, 
     "elevation": 170.36000000000001 
     }, 
     { 
     "distance": 52.659999999999997, 
     "latitude": -34.965213769999998, 
     "longitude": 138.64747619299999, 
     "elevation": 171.03999999999999 
     }, 
     { 
     "distance": 63.43, 
     "latitude": -34.965274790300001, 
     "longitude": 138.64756772300001, 
     "elevation": 172.0 
     }, 
     { 
     "distance": 73.459999999999994, 
     "latitude": -34.965339666200002, 
     "longitude": 138.647644082, 
     "elevation": 172.97 
     }, 
     { 
     "distance": 84.780000000000001, 
     "latitude": -34.965408314000001, 
     "longitude": 138.64773561199999, 
     "elevation": 173.96000000000001 
     }, 

     // LOTS MORE OF THESE // 

     ], 
    "totalDistance": 138442.46999999991, 
    "routeName": "Tour_Down_Under_Stage_One" 
}

來源

2014-12-07 Will Luce

$.getJSON()

是異步功能。它返回的JSON數據在你的代碼試圖使用它的地方不可用。相反，您需要將此代碼放在的$.getJSON()回調中，或者在此回調調用的函數中。

此外，您不應該使用for..in循環來遍歷數組。要麼使用老式數字for循環，要麼使用.forEach()等。

所以，代碼的固定（但未經測試）版本，可能是這樣的：

 function initialize() { 
     var mapOptions = { 
      zoom: 3, 
      center: new google.maps.LatLng(0, -180), 
      mapTypeId: google.maps.MapTypeId.TERRAIN 
     }; 

     var map = new google.maps.Map(document.getElementById('map-canvas'), 
      mapOptions); 

     $.getJSON('Tour_Down_Under_Stage_One.json', function(data) { 
      var routeCoordinates = []; 
      data.points.forEach(function(point) { 
       var coordinates = 
       new google.maps.LatLng(point.latitude, point.longitude); 
       routeCoordinates.push(coordinates); 
      }); 

      var route = new google.maps.Polyline({ 
      path: routeCoordinates, 
      geodesic: true, 
      strokeColor: '#FF0000', 
      strokeOpacity: 1.0, 
      strokeWeight: 2 
      }); 

      route.setMap(map); 
     }); 
     } 

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

working fiddle

來源

2014-12-07 05:07:41

感謝您的信息。說得通。但它看起來像你的小提琴與我們開始的同一個地方。路線沒有顯示。 – 2014-12-07 16:17:54

我明白了。我錯過了一個右括號。關於如何讓地圖專注於加載路徑的任何線索？ – 2014-12-07 17:26:10

谷歌API路徑不顯示

回答

相關問題