2013-08-26 42 views
0

我是新來的鐵軌。在軌道視圖路徑中包含json文件?

我試圖添加以下代碼:

$.ajax({ 
    url: "states.geojson", 
    dataType: 'json', 
    success: function load(d) { 
     var states = L.geoJson(d).addTo(map); 
     L.marker([38, -102], { 
      icon: L.mapbox.marker.icon({ 
       'marker-color': '#f22' 
      }), 
      draggable: true 
     }).addTo(map) 
     .on('dragend', function(e) { 
      var layer = leafletPip.pointInLayer(this.getLatLng(), states, true); 
      document.getElementById('state').innerHTML = layer.length ? 
       layer[0].feature.properties.name : ''; 
     }); 
    } 
}); 

這是我從這裏得到:http://www.mapbox.com/mapbox.js/example/v1.0.0/point-in-polygon/

這是我的index.html.erb:

<!DOCTYPE html> 
<html> 
<head> 
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' /> 
    <script src='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.js'></script> 
    <link href='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.css' rel='stylesheet' /> 
    <!--[if lte IE 8]> 
    <link href='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.ie.css' rel='stylesheet' > 
    <![endif]--> 
    <style> 
    body { margin:0; padding:0; } 
    #map { position:absolute; top:0; bottom:0; width:100%; } 
    </style> 
</head> 
<body> 
<style> 
#state { 
    position:absolute; 
    top:10px; 
    right:10px; 
    background:#fff; 
    font-size:30px; 
    padding:10px; 
    z-index:999; 
} 
</style> 

<!-- <script src="leaflet-pip.min.js"></script> --> 
<div id='map'></div> 
<div id='state'></div> 
<script type='text/javascript'> 
var map = L.mapbox.map('map', 'lizozomro.map-6yvs8g1g') 
    .setView([38, -102.0], 5); 

$.ajax({ 
    url: "states.geojson", 
    dataType: 'json', 
    success: function load(d) { 
     var states = L.geoJson(d).addTo(map); 
     L.marker([38, -102], { 
      icon: L.mapbox.marker.icon({ 
       'marker-color': '#f22' 
      }), 
      draggable: true 
     }).addTo(map) 
     .on('dragend', function(e) { 
      var layer = leafletPip.pointInLayer(this.getLatLng(), states, true); 
      document.getElementById('state').innerHTML = layer.length ? 
       layer[0].feature.properties.name : ''; 
     }); 
    } 
}); 
</script> 
</body> 
</html> 

我得到一個資源未找到錯誤(404)上的狀態.geojson

我不知道我到底在哪裏sh應該放置它或如何使用正確的路徑參照。

現在我有該文件的副本,我的根app文件夾,一個在我看來,文件夾(稱爲圖),旁邊的index.html.erb

我怎樣才能正確地引用資源?

回答

0

把它放在my_project/public/文件夾中。您還希望將該文件重命名爲states.geojson.json