在我的rails应用程序中添加谷歌地图 - 需要帮助开始而不使用宝石 - 想要编写自定义代码

Question

我有一个带有列表数据库的rails应用程序:带有坐标的地址.目前我正在使用索引方法加载应用程序时在主页上显示列表:

<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不太熟悉,我想我可能必须知道吗？

Answer 1

首先,你为什么使用纬度和经度？我不会对我必须输入有关我的列表的详细信息的页面有一个很好的看法.

也就是说,让我解释使用谷歌地图的最简单方法.

只需将带有此链接的图片标记用作 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很容易实现.

假设您的地图图像是这样的<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");
});