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

Question

我目前正在开发一个销售代表跟踪工具，并且一直在为地图中的地理编码对象显示标记数组。我正在使用地理编码器的近功能来查找通过 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 上的地图

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

应用程序的设置方式一次最多有两个或三个对象，我知道 json 是一种选择，但我希望有办法避免这样做。我读过的所有关于地图数组的资源都涉及手动传递数组参数，但我需要动态地进行，好像对象会因代表而异。

提前感谢您的帮助。

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);
    });  
  });
}

Answer 2

感谢@Orlando 为我指明了正确的方向。我设法通过对标记和信息窗口使用 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);
    }
}