2012-11-25 60 views
1

我能夠精細使用cloudmade API檢索的方向,但我不能似乎這些座標添加到我的地圖。Leaflet.js以GeoJSON沒有出現在地圖上 - 我試着表現出方向

我已經試過兩種不同的方法

 var myStyle = { 
     "color": "#ff7800", 
     "weight": 5, 
     "opacity": 0.65 
     }; 
     var myLines = [{ 
     "type": "LineString", 
     "coordinates": [] 
     }]; 

     myLines.coordinates = [[]]; 
     for (var i = result.data.route_geometry.length - 1; i >= 0; i--) { 
     if(!isNaN(result.data.route_geometry[i][0]) && !isNaN(result.data.route_geometry[i][1])){ 
      myLines.coordinates[i] = [result.data.route_geometry[i][0], result.data.route_geometry[i][1]]; 
     } 
     }; 
     L.geoJson(myLines, {style: myStyle}).addTo(window.map); 

 var geojsonFeature = { 
      "type": "Feature", 
      "properties": { 
       "name": "Coors Field", 
       "amenity": "Baseball Stadium", 
       "popupContent": "This is where the Rockies play!" 
      }, 
      "geometry": { 
       "type": "Point", 
       "coordinates": [] 
      } 
     }; 

     for (var i = result.data.route_geometry.length - 1; i >= 0; i--) { 
     if(!isNaN(result.data.route_geometry[i][0]) && !isNaN(result.data.route_geometry[i][1])){ 
      geojsonFeature.geometry.coordinates[i] = [result.data.route_geometry[i][0], result.data.route_geometry[i][1]]; 
     } 
     }; 
     L.geoJson(geojsonFeature).addTo(window.map); 

我能夠添加標記的罰款。我的問題是類似這樣的Leaflet GeoJSON display所以我試圖扭轉座標這樣

myLines.coordinates[i] = [result.data.route_geometry[i][0], result.data.route_geometry[i][1]]; 

但我還是什麼也沒有添加到地圖中。

在控制檯中沒有錯誤。

回答

1

這是做到這一點的正確方法:http://jsfiddle.net/8QHFe/153/

var linePts = [ 
    [ 31.811628, 24.904771 ], 
    [ 31.810856, 24.91096 ], 
    [ 31.817636, 24.911855 ], 
    [ 31.831133, 24.907477 ], 
    [ 31.841497, 24.898679 ], 
    [ 31.841025, 24.895312 ], 
    [ 31.837935, 24.891225 ], 
    [ 31.842356, 24.889006 ], 
    [ 31.853814, 24.888626 ] 
]; 

// a FOR loop operates on each item in a list 
for(i=0; i < linePts.length; i=i+1) { 
    // turn this coordinate into a LatLng 
    linePts[ i ] = new L.LatLng(linePts[ i ][ 0 ], linePts[ i ][ 1 ]); 
} 

// add the line 
line = new L.Polyline(linePts, { color: "purple" }); 
map.addLayer(line);​ 
+0

那不是正確的方式,這是一種不同的方式。折線和GeoJSON的是不同的 – Yonkee