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

Showing markers on Google Maps v3 in a Rails app - using Javascript and JSON

本文关键字：使用 Javascript JSON 应用程序 Rails 显示 Google v3 Maps      更新时间：2023-09-26

Rails，Google maps，Javascript和JSON同时出现。因此，如果这是一个简单的问题，我深表歉意。

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

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

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

  1. index.html.erb 在应用程序中执行代码.js
  2. 应用程序.js调用 listings_controller.rb 中的一个函数，该函数获取列表模型中的所有列表并将它们转换为一个巨大的 JSON 对象。
  3. 应用程序.js现在拥有列表的 JSON 数组，并在循环中解析它并提取列表的名称、纬度和经度以及其他一些字段，并将此信息传递给 JavaScript 方法 "addMarker（纬度、经度、描述、地图）"

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

索引.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
    }
   }

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

相关文章：