2

Rails、Googleマップ、Javascript、JSONを一度に。簡単な質問である場合はお詫び申し上げます。

それぞれが緯度と経度を持つリストのデータベースを備えたRailsアプリがあります。私がやりたいのは、ページが読み込まれたときに、すべてのリストを地図上に表示したいということです。

したがって、listings_controller.rb、application.js、index.html.erbは次のようになります。この本を私のコードのリファレンスとして使用していますが、問題は、その例で非推奨のGoogleマップバージョンを使用していることです。

コードで実行する必要のある手順は次のとおりです。

  1. index.html.erbはapplication.jsのコードを実行します
  2. application.jsは、listings_controller.rbの関数を呼び出します。この関数は、Listingモデルのすべてのリストを取得し、それらを巨大なJSONオブジェクトに変換します。
  3. application.jsにはリストのJSON配列があり、ループ内でそれを解析し、リストの名前、緯度と経度、およびその他のフィールドを抽出して、この情報をjavascriptメソッド "addMarker（latitude、longitude、description、map ）」

問題は、以下にリストされているように、これらのステップの一部を実行する方法しか知らないことです。誰かが穴を埋めて私を助けてくれるかどうか疑問に思いました。

index.html.erb

<!DOCTYPE html>  
<html>  
  <head>  
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
    <style type="text/css">  
      html { height: 100% }  
      body { height: 100%; margin: 0; padding: 0 }  
      #map_canvas { height: 100% }  
    </style>  
    <script type="text/javascript"  
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyATZJn-p3mhbyk9JmR8mevKAbtrx4ZzPiQ&sensor=false">  
    </script>  
    <%=javascript_include_tag 'application' %>  

  </head>  
  <body onload="initialize()">  
    <div id="map_canvas" style="width:80%; height:80%"></div>  
  </body>  
</html>

Listings_controller.rb

def index   
    @listings = Listing.order(:name)  
    self.all_listings_json      
end  

def all_listings_json  
   render :text=>(@listings).to_json  
end

application.js

function initialize() 
  {  
    options =   
    {   
      center: new google.maps.LatLng(vlat,vlong),  
      zoom: 15,  
      mapTypeId: google.maps.MapTypeId.ROADMAP  
    };  

    map = new google.maps.Map(document.getElementById("map_canvas"), options);  

    //get JSON object         
    var markersArray = getMarkersJSON();

    //pass JSON object to method and add listings in array to map
    addMarkerArray( markersArray , map);
   }

function getMarkersJSON()  
{  
    //To do  

}  

function addMarkerArray( markersArray, map)  
   {
    var i;
    for(i = 0; i < markersArray.length ; i++)
    {
        //To DO

    }

   }
4

1 に答える 1

0

では、マップを作成するまでに、JSON オブジェクトは既に作成されていますか?

次に、オブジェクトを実行するだけです。

var myJSON = [
{lat : 10.010232,long: 34.123232},
{lat : 23.122323,long: 76.343434},
{lat : 43.123434,long: 74.12343}
]; //Test data

    function addMarkerArray( markersArray, map)
    { 
        for(var i = 0; i < markersArray.length ; i++) 
        {
          var latitude = markersArray[i].lat;
          var longitude = markersArray[i].long;
          var myLatlng = map.LatLng(latitude,longitude);
          var marker = map.Marker({
              position: myLatlng,
              map: map,
              title:"One title"
          });
        }
    }
    addMarkerArray(myJSON,map);

ここで Google マップのドキュメントを確認できます: https://developers.google.com/maps/documentation/javascript/overlays

于 2012-04-18T17:55:56.767 に答える