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

标签 javascript ruby-on-rails google-maps-api-3

Rails、Google map 、Javascript 和 JSON 集于一身。如果这是一个简单的问题,我深表歉意。

我有一个 Rails 应用程序,其中包含一个列表数据库,每个列表都有一个纬度和经度。我想要做的是当页面加载时,我想在 map 上显示所有列表。

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

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

  1. index.html.erb 执行application.js中的代码
  2. application.js 调用 listings_controller.rb 中的一个函数,该函数获取列表模型中的所有列表并将它们转换为一个巨大的 JSON 对象。
  3. application.js 现在拥有列表的 JSON 数组并在循环中解析它并提取列表的名称、纬度和经度以及一些其他字段并将此信息传递给 javascript 方法“addMarker(latitude, longitude,描述, 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

    }

   }

最佳答案

所以在构建 map 时您已经有了 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 map 文档: https://developers.google.com/maps/documentation/javascript/overlays

关于javascript - 在 Rails 应用程序中显示 Google Maps v3 上的标记 - 使用 Javascript 和 JSON,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10214860/

相关文章:

JavaScript 返回错误的 IE 版本

ruby-on-rails - Ruby on Rails : How do I add placeholder text to a f. 文本字段?

ruby-on-rails - 在 Mac 操作系统上重置终端?帮助安装 Rails

angularjs - 使用 angular-google-maps 刷新 map 和标记

javascript - 地理编码 Google Maps API 的范围

javascript - jQuery 从 cookie 读取国家并放入 Google 变量

javascript - 在此受限设置中,eval() 会导致安全问题吗?

javascript - 使用 setTimeout 的递归函数调用限制为每秒约 200 次调用,为什么?

ruby-on-rails - rails : Issue with less after bootstrap update -- Cannot load such file -- less

javascript - 仅在 PHP 中使用 Fetch 成功后才重定向页面