Javascript RubyonRails-Geocoder对象作为google地图标记数组

我目前正在开发一个销售代表跟踪工具，我一直在为地图中的地理编码对象显示标记数组。我正在使用geocoder的near函数查找通过url传递的距离我所在位置0.5km的地理编码对象。只要半径内只有一个对象，我当前的代码就可以工作，我知道我需要使用数组来显示多个对象，但在过去的两周里，我一直在这样做

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

my stores/index.html.erb上的地图

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 %>

函数initMap（）{
var lat=
乏液化天然气=
var mylatng={lat:lat，lng:lng}
var map=new google.maps.map（document.getElementById（'map'）{
缩放：15，
中心：mylatlng
}); 
var marker=new google.maps.marker({
职位：mylatlng，
地图：地图，
动画：google.maps.animation.DROP，
});
google.maps.event.addListener（标记，'click'，函数（）{
var c=confirm（'您想访问此商店吗？'）
如果（c==true）{
window.location.href=''；
}
如果（c==false）{
window.location.href=''；
}
});
var contentString='请单击此标记访问'+'+''；
var infowindow=new google.maps.infowindow({
内容：contentString
});
google.maps.event.addListenerOnce（映射'tilesloaded'，函数（）{
信息窗口。打开（地图、标记）；
});  
}

应用程序的设置方式一次最多只能有两到三个对象，我知道json是一种选择，但我希望有一种方法可以避免这样做。我读过的所有关于map Array的资源都涉及手动传递arrays参数，但我需要动态地传递，因为对象会随着rep的不同而变化

---

提前感谢您的帮助。

您正在以一种毫无意义的方式将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);
    });  
  });
}

函数initMap（）{
var$stores=$（“.store对象”）；
$stores.each（函数（）{
var lat=$（此）.data（“纬度”）；
var lng=$（此）.data（“经度”）；
var mylatng={lat:lat，lng:lng}
var map=new google.maps.map（document.getElementById（'map'）{
缩放：15，
中心：mylatlng
}); 
var marker=new google.maps.marker({
职位：mylatlng，
地图：地图，
动画：google.maps.animation.DROP，
});
google.maps.event.addListener（标记，'click'，函数（）{
var c=confirm（'您想访问此商店吗？'）
如果（c==true）{
window.location.href=$（this.data（“路径”）；
}
如果（c==false）{
window.location.href=''；
}
});
var contentString='请单击此标记访问'+'+$（this）.data（“name”）；
var infowindow=new google.maps.infowindow({
内容：contentString
});
google.maps.event.addListenerOnce（映射'tilesloaded'，函数（）{
信息窗口。打开（地图、标记）；
});  
});
}

感谢奥兰多为我指明了正确的方向。我通过使用JSON和标记和信息窗口的JS循环解决了我的问题。我没有更改控制器中的任何内容，修改后的代码如下所示

var map;

function initMap () {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: <%= params[:latitude] %>, lng: <%= params[:longitude] %>},
      zoom: 18,
      scrollwheel: false,
});

var json = <%= raw @locations.map.to_json {|store|}.html_safe %>;

for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
  LatLng = {lat: data.latitude, lng: data.longitude};

var marker = new google.maps.Marker({
position: LatLng,
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 = "stores/" + data.id;
      }    
      if (c === false) {
      window.location.href = '<%= dashboard_path %>';   
      }
  });

    var infowindow = new google.maps.InfoWindow();
    infowindow.setContent('Click the Marker to visit' + ' ' + data.storename);
    infowindow.open(map, marker);
    }
}

var映射；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:，lng:}，
缩放：18，
滚轮：错误，
});
var json=；
for（var i=0，length=json.length；i

感谢您的回复，我对Rails、JS、JQuery和谷歌地图都是新手，并且一直在关注这方面的教程。我尝试了你的代码，它不会抛出任何错误，但不会显示地图或任何标记。使用Chrome开发工具，它也不会抛出任何错误，但似乎不想工作。我还试图稍微修改一下代码，但没有用。我是否必须为标记使用标记数组，因为在位置数组中一次可能加载多个存储？再次感谢您的帮助。