2

我有一个带有列表数据库的 Rails 应用程序：其中包含坐标的地址。目前我使用 index 方法在应用加载时在主页上显示列表：

<h1>Listings</h1>

<table>
  <tr>
    <th>id</th>
    <th>Name</th>
    <th>Phone Number</th>
    <th>Latitude</th>
    <th>Longitude</th>
    <th>Cuisine</th>
  </tr>

<% count = 0 %>
<% @listings.each do |listing| %>

 <!--<%count = count.to_i + 1 %> -->
  <tr>
    <td><%= listing.id %></td>
    <td><%= listing.name %></td>
    <td><%= listing.telephone %></td>
    <td><%= listing.latitude %></td>
    <td><%= listing.longitude %></td>
    <td><%= listing.cuisine %></td>
    <td><%= link_to 'Details', listing %></td>
    <td><%= link_to 'Edit', edit_listing_path(listing) %></td>
    <td><%= link_to 'Delete', listing, confirm: 'Are you sure?', method: :delete %></td>
    <td><%= link_to 'Around', around_listings_path(:latitude => listing.latitude, :longitude => listing.longitude) %></td>
    <td><%= link_to 'Menus', %></td>
    </tr>
<% end %>
</table>


<br />

<%= link_to 'New Listing', new_listing_path %>


<br/>
    <%= debug(params) if Rails.env.development? %>
    <br/>

我想做的是添加一个在地图上显示列表的新页面。关于从哪里开始的任何建议？我对Javascript不是很熟悉，我想我可能必须知道吗？

4

2 回答 2

5

首先，为什么要使用纬度和经度？我不会对必须在其上输入有关我的列表的详细信息的页面有很好的看法。

也就是说，让我解释一下使用谷歌地图的最简单方法。

只需使用带有此链接的图像标签作为src

https://maps.googleapis.com/maps/api/staticmap?center=#{address}&zoom=14&size=300x300&markers=#{address}&sensor=false

在哪里address，51+Wall+St, NY或者无论它在哪里。您只需将空格替换为地址中的加号。请注意，我还使用带有&markers=的标记来标记标记的位置。

现在关于那个 javascript，您可能想在地址更改（或纬度或经度）时更改图像。

这很容易用 jQuery 完成。

假设您的地图图像是 this <img id="map_image" src="https://maps.googleapis.com/maps/api/staticmap?center=51+Wall+Street,NY&zoom=14&size=300x300&sensor=false"/>。

src如果地址更改的img某些文本输入，只需更改

$('input#listing_address').live('change',function(){
address = $(this).val().replace(/ /g,"+");
$('#map_image').attr("src","https://maps.googleapis.com/maps/api/staticmap?center=" + address + "&zoom=14&size=300x200&sensor=false");
});
于 2012-04-15T13:07:49.460 回答
1

使用 gmaps4rails，它非常简单：

在控制器中：

def yourmap
  @json = YourModel.all.to_gmaps4rails
end

在您看来：

<%= gmaps({"markers" => {"data" => @json , "auto_adjust"=>false, }}} ) %>

它比我所展示的要多一些，但只是为了说明使用 gmaps4rails 的基本概念！YourModel 必须添加 lat 和 lon 属性。

于 2012-04-15T16:31:11.060 回答