1

cloudmade api を使用してルートをうまく取得できますが、それらの座標をマップに追加できないようです。

私は2つの異なるアプローチを試しました

      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 ディスプレイに似ているので、このように座標を逆にしてみました

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

しかし、私はまだマップに何も追加されていません。

コンソールにエラーはありません。

4

1 に答える 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);​
于 2012-12-26T04:58:05.137 に答える