2

Rails、谷歌地图、Javascript 和 JSON 都可以同时使用。因此，如果这是一个简单的问题，我深表歉意。

我有一个带有列表数据库的 Rails 应用程序，每个列表都有纬度和经度。我想要做的是当页面加载时，我想在地图上显示所有列表。

所以我有如下的listings_controller.rb、application.js、index.html.erb。我使用这本书作为我的代码的参考，但问题是它的示例使用了已弃用的 Google 地图版本。

我需要使用我的代码执行的步骤如下：

  1. index.html.erb 执行 application.js 中的代码
  2. application.js 调用 listings_controller.rb 中的一个函数，该函数获取列表模型中的所有列表并将它们转换为一个巨大的 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

应用程序.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 回答