用嵌入式红宝石循环谷歌地图标记？答案

【问题标题】：Looping Google Maps Markers with embedded ruby?用嵌入式红宝石循环谷歌地图标记？
【发布时间】：2016-07-04 02:22:30
【问题描述】：

我是 Rails 新手，我想知道如何准确地循环这些标记。我的 JS 变量“count”无法识别，我需要一些帮助来遍历我的 ruby 数组或需要其他解决方案。

 function initMap() {
          var mapDiv = document.getElementById('map');
          var map = new google.maps.Map(mapDiv, {
              center: {lat: 44.540, lng: -78.546},
              zoom: 8
          });

          var total = <%= mapcount %>

          var javascriptcount = 0;

          var count = 0;

      <% arraylat = [] %> 
      <% arraylng = [] %> 

      <% mapposttotal.each do |q| %>
          <% arraylat << q.lat %> 
          <% arraylng << q.lng %> 
      <% end %>

          for (; javascriptcount <= total; javascriptcount++) {
            var marker = new google.maps.Marker({
              position: {lat: <%= arraylat[count] %>, lng: <%= arraylng[count] %>},
              map: map,
              title: 'Hello World!'
            });
            count = count + 1;
            console.log()
          }

        var Clicker = document.getElementById('PostIt');


        Clicker.addEventListener('click', function() {
            window.location='/newpost.html';}, false);

        }


    <% end %>

【问题讨论】：

混合 erb 代码和 javascript 非常糟糕。您最好通过 ajax 调用获取标记信息（如果它们存储在 db 中）并将它们填充到 success response

标签： javascript ruby-on-rails google-maps embedded-ruby

【解决方案1】：

由于您是 Rails 新手，我可以建议以下解决方案：

1.在MarkersController中添加一个动作：

    def index
      respond_to do |format|
        format.json do 
          markers = Marker.all.map do |marker|
             {
               lat: marker.lat,
               lng: marker.lng
             }
          end
          render json: markers
        end
      end
    end

2.在routes.rb

get "/markers", to: "markers#index"

3.Javascript：

function initMap() {
  $.getJSON("/markers", function(data) {
    // All your js code to populate markers go in here. 
  })
}

这基本上就是它应该如何工作的。只需根据您的需要定制代码

【讨论】：