javascript - Ruby on Rails - 将地理编码器对象作为谷歌地图标记数组

Question

我目前正在开发一个销售代表跟踪工具，并且一直致力于在 map 中显示地理编码对象的标记数组。我正在使用地理编码器的近函数来查找通过 url 传递的距离我的位置 0.5 公里的地理编码对象。只要该半径内只有一个对象，我当前的代码就可以工作，并且我知道我需要使用数组来显示多个对象，但在过去的两周里我一直坚持这一点。

stores_controller.rb
def index
    @latitude = params[:latitude].to_f
    @longitude = params[:longitude].to_f
    @stores = current_user.stores
    @locations = @stores.near([@latitude, @longitude], 0.5)
end

我的商店/index.html.erb上的 map

function initMap() {
    <% @locations.each do |store| %>
    var lat = <%= store.latitude %>
    var lng = <%= store.longitude %>
    var mylatlng = {lat: lat, lng: lng}

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: mylatlng
    }); 

    var marker = new google.maps.Marker({
      position: mylatlng,
      map: map,
      animation: google.maps.Animation.DROP,
    });
      google.maps.event.addListener(marker, 'click', function () {
      var c = confirm('Would you like to visit this store?')
      if (c === true) {
      window.location.href = '<%= store_path(store) %>';  
      }
      if (c === false) {
      window.location.href = '<%= dashboard_path %>';   
      }

    });

    var contentString = 'Please click on this Marker to visit' + ' ' + '<%= store.storename %>';   

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });
    google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
    infowindow.open(map, marker);
    });  
    }
    <% end %>

应用程序的设置方式一次最多有两个或 3 个对象，我知道 json 是一个选项，但我希望有一种方法可以避免这样做。我读过的有关 map 数组的所有资源都涉及手动传递数组参数，但我需要动态地执行此操作，因为对象会因代表而异。

预先感谢您的帮助。

Answer 1

您正在以一种没有任何意义的方式将 Javascript 与 Ruby 代码混合在一起。它与一个对象一起工作的原因是，当您使用 @locations 数组中的单个对象执行它时，它会运行一次并正确输出该 Javascript。当它有 > 1 个对象时，它基本上会复制 initMap Javascript 方法的内容。

假设您使用的是 jQuery，以下是一种可行的方法:

<%- @locations.map {|store| "<div id='store_#{store.id}' class='store-object' data-latitude='#{store.latitude}' data-longitude='#{store.longitude}' data-name='#{store.name}' data-path='#{store_path(store)}'></div>".html_safe} %>

function initMap() {
  var $stores = $(".store-object");
  $stores.each(function() {
    var lat = $(this).data("latitude");
    var lng = $(this).data("longitude");
    var mylatlng = {lat: lat, lng: lng}

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: mylatlng
    }); 

    var marker = new google.maps.Marker({
      position: mylatlng,
      map: map,
      animation: google.maps.Animation.DROP,
    });

    google.maps.event.addListener(marker, 'click', function () {
      var c = confirm('Would you like to visit this store?')
      if (c === true) {
        window.location.href = $(this).data("path");  
      }
      if (c === false) {
        window.location.href = '<%= dashboard_path %>';   
      }
    });

    var contentString = 'Please click on this Marker to visit' + ' ' + $(this).data("name");   

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
      infowindow.open(map, marker);
    });  
  });
}