1

我的 app/views/people/show.html.erb 中有这个 javascript 代码。它使用谷歌地图 api v3。但问题是，这非常突兀。我想要的是我希望 js 代码在咖啡脚本中。而且我应该仍然能够传递经度/纬度值以在地图中反映它们。

<% unless @person.addresses.blank? %>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">
    function initialize() {

      <%
        if @person.addresses.first.latitude.blank? && @person.addresses.first.longitude.blank?
          lat_long = @person.organization.latitude_longitude
        else
          address = @person.addresses.first
          lat_long = [address.latitude, address.longitude] 
        end

        lat = lat_long[0]
        long = lat_long[1]
      %>

      var myLatlng = new google.maps.LatLng(<%= lat %>, <%= long %>);
      var mapOptions = {
        zoom: 17,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById('map_canvas_show'), mapOptions);

      var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Hello World!'
      });
    }
  google.maps.event.addDomListener(window, 'load', initialize);
  </script>

  <div id="map_canvas_show"></div>

<% end %>

<h1>
  <%= @person.name %> <small><%= link_to(t('general.edit'), edit_person_path(@person)) %></small>
</h1>

<h3>
  <%= @person.organization_names(current_organization) %>
</h3>

<div>
  <%#= image_tag @person.fb_profile_pic_large %>
</div>

<div class="sfield field_group">
  <div class="ls"><%= t('.addresses')%></div>
  <% @person.addresses.each do |address| %>
    <div class="rs"><%= address.address %></div>
  <% end %>
</div>

<div class="sfield field_group">
  <div class="ls"><%= t('.phone_numbers')%></div>
  <% @person.phone_numbers.each do |phone_number| %>
    <div class="rs field_group"><%= phone_number.phone_number %></div>
  <% end %>
</div>

<div class="sfield field_group">
  <div class="ls"><%= t('.offices')%></div>
  <% @person.office_names.each do |office_name| %>
    <div class="rs"><%= office_name %></div>
  <% end %>
</div>
4

1 回答 1

1

您可以为此使用HTML5 data-* 属性。另请参阅 rails 指南的ujs 部分。

<div id="map_canvas_show" data-lat="<%= lat %>" 
                          data-long="<%= long %>" />

然后在jQuery中你可以使用类似的东西来获取坐标：

var map_canvas = $('#map_canvas_show'); 
var lat = map_canvas.data('lat');
var lng = map_canvas.data('long');
var myLatlng = new google.maps.LatLng(lat, lng);
于 2014-01-02T16:32:02.293 回答