JSONファイルを繰り返して複数のポリラインを表示する

外部のJSONリソースから取得された複数のポリラインをマップにレンダリングしようとしています。各JSONレコードには、いくつかの説明フィールドとLatLngの配列を含むフィールドがあります。コードはJSONデータをうまく取得して適切に解析するようです。私は各レコードマッピングをポリラインで繰り返しますが、何らかの理由でマップ上に表示することができません。 Google Maps APIを初めて使用しました。私はおそらく何か愚かなことをやっているが、私が見つけたほど多くの例を見て回ったが、明らかに間違ったことは見つけられない。すべての提案は感謝して受け取りました。JSONファイルを繰り返して複数のポリラインを表示する

次の例から採取したポリラインを表示するためのコードの基礎：の「行」

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
    #map_canvas { 
     width: 1024px; 
     height: 700px; 
     } 
</style> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"   type="text/javascript"></script> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js? sensor=false"></script> 

<script type="text/javascript"> 

function initialize(){ 
    var latlng = new google.maps.LatLng(0, 23); 
    var myOptions = { 
     zoom: 4, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    var url = "http://webstore.thedatahub.org/stevesong/afterfibre/testdata2.json? _limit=3"; 
    var mypath = new Array(); 
     $.getJSON(url, function (data) { 

      // Parse the Linestring field into an array of LatLngs 
      $.each(data.data, function(index, record) { 
       line = JSON.parse(record.Linestring); 
     // Parse the array of LatLngs into Gmap points 
     for(var i=0; i < line.length; i++){ 
     //Tokenise the coordinates 
     var coords = (new String(line[i])).split(","); 
        mypath.push(new google.maps.LatLng(coords[1], coords[0])); 
     } 
       var polyline = new google.maps.Polyline({ 
        path: mypath, 
        strokeColor: '#ff0000', 
        strokeOpacity: 1.0, 
        strokeWeight: 3 
       }); 

       polyline.setMap(map); 

      }); 

     }); 
    } 

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

出典

2012-01-01 SteveSong

おかげをループする際の問題はcoorinatesをtokenisingなかったhttp://code.google.com/intl/no/apis/maps/documentation/javascript/examples/polyline-simple.html

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
    #map_canvas { 
     width: 1024px; 
     height: 700px; 
     } 
</style> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 

<script type="text/javascript"> 

function initialize(){ 
    var latlng = new google.maps.LatLng(0, 23); 
    var myOptions = { 
     zoom: 4, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    var url = "http://webstore.thedatahub.org/stevesong/afterfibre/testdata2.json?_limit=3"; 
    var path = []; 
     $.getJSON(url, function (data) { 

      // Parse the Linestring field into an array of LatLngs 
      $.each(data.data, function(index, record) { 
       line = JSON.parse(record.Linestring); 

       // Parse the array of LatLngs into Gmap points 
       for(var i=0; i < line.length; i++){ 
        path.push(new google.maps.LatLng(line[1],line[0])); 
       } 
       var polyline = new google.maps.Polyline({ 
        path: path, 
        strokeColor: '#ff0000', 
        strokeOpacity: 1.0, 
        strokeWeight: 3 
       }); 

       polyline.setMap(map); 

      }); 

     }); 
    } 

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

出典

2012-01-07 11:30:15 SteveSong

グレッグMahlknechtパズルの最後の部分を提供しています。各JSONレコードを1つの巨大ポリラインとは違って一意に表示させるには、各 ".each"反復後にポリライン配列を再初期化する必要があります。最終的に私が後にしたことをする最終版がここにあります。おかげでミッチとグレッグ。

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
    #map_canvas { 
     width: 1024px; 
     height: 700px; 
     } 
</style> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 

<script type="text/javascript"> 

function initialize(){ 
    var latlng = new google.maps.LatLng(0, 23); 
    var myOptions = { 
     zoom: 4, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    var url = "http://webstore.thedatahub.org/stevesong/afterfibre/testdata2.json?_limit=5"; 

     $.getJSON(url, function (data) { 

      // Parse the Linestring field into an array of LatLngs 
      $.each(data.data, function(index, record) { 
       var mypath = new Array(); 
       line = JSON.parse(record.Linestring); 
       // Parse the array of LatLngs into Gmap points 
       for(var i=0; i < line.length; i++){ 
        //Tokenise the coordinates 
        var coords = (new String(line[i])).split(","); 
        mypath.push(new google.maps.LatLng(coords[1], coords[0])); 
       } 
       var polyline = new google.maps.Polyline({ 
        path: mypath, 
        strokeColor: '#ff0000', 
        strokeOpacity: 1.0, 
        strokeWeight: 3 
       }); 
       polyline.setMap(map); 
      }); 

     }); 
    } 

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

出典

2012-01-05 13:31:23

ありがとうミッチ！ポリラインがすべて1つの大きなポリラインに結合されているという点で別の問題があります。つまり、1つのポリラインの終点が次のポリラインの始点につながる直線を持っています。ポリラインの配列を作成できますか？ – SteveSong

ポリラインは、 'path'配列で反復された座標に従ってレンダリングされます。 –

わかりましたが、私が意図したときには1つの巨大なポリラインを作成するように見えるのは、各JSONレコードを別々のポリラインとして表示することでした。明らかに、私はGmapsがどのように動作するかについて何か基本的なものを見逃している。 – SteveSong

JSONファイルを繰り返して複数のポリラインを表示する

答えて

関連する問題