在Rails应用程序的Google Maps v3上显示标记 - 使用Javascript和JSON

Rails，Google地图，Javascript和JSON同时使用。所以我很抱歉如果这是一个简单的问题。在Rails应用程序的Google Maps v3上显示标记 - 使用Javascript和JSON

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

所以我有如下列表listing_controller.rb，application.js，index.html.erb。我使用这本书作为我的代码的参考，但问题是它的例子使用谷歌地图版本已弃用。

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

index.html.erb中的application.js
application.js中执行代码调用listings_controller.rb一个函数，它接受所有列表模型中的列表并将它们转换为一个巨大的JSON对象。
application.js现在拥有JSON列表数组并在循环内解析它，并提取列表名称，其经纬度和其他字段，并将此信息传递给javascript方法“addMarker（纬度，经度，描述，地图）“

问题是我只知道如何执行下面列出的这些步骤的部分。我想知道是否有人可以填补漏洞帮助我。

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 

    } 

    }

来源

2012-04-18 banditKing

所以你已经在构建地图时有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);

您可以查看谷歌地图文件位置： https://developers.google.com/maps/documentation/javascript/overlays

来源

2012-04-18 17:55:56 Opi

非常感谢。我真的想知道如何通过在listing_controller中调用该方法来获取JSON对象：“all_listings_JSON”。这是如何工作的。我想，我可能不得不创建一个HTTP请求并调用该方法。但是，我似乎无法在互联网上找到任何代码 – banditKing 2012-04-18 18:01:10

在Rails应用程序的Google Maps v3上显示标记 - 使用Javascript和JSON

回答

相关问题