2

座標を含むlistings：addressesのデータベースを備えた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にあまり詳しくないので、知っておく必要があると思います。

4

2 に答える 2

5

まず、なぜ緯度と経度を使っているのですか？自分のリストに関する詳細を入力しなければならないページについては、良い意見がありません。

というわけで、Google マップの最も簡単な使い方を説明しましょう。

このリンクで画像タグを使用するだけです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");
});
于 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 に答える