javascript - 如何通过复选框输入动态更新模型并立即渲染地图更改

Question

我希望有一组与我的Site模型相关联的复选框，当用户选中一个时，相关的位置会显示在地图上。

我已经在我的数据库中植入了以下格式的一些站点：

/db/migrate/seeds.rb

Site.create(name: "Site name",
    latitude: 40.36618,
    longitude: -105.56095,
    include: false, )

我需要生成的复选框来更新:include字段，然后在添加新地图标记时立即显示它们。

/views/sites/map.html.erb

<div class="float-left">
<div class="inner-left">
  <%= hidden_field_tag("sites[]", nil) %>
  <% Site.all.each do |p| %>
    <%= check_box_tag("sites[]", p.name, p.include, { id: dom_id(p) } ) %>
    <%= label_tag dom_id(p), p.name %>
    <br>
  <% end %>
</div>
</div>

<div class="float-right">
<div class="inner-right">
  <div id="usmap" style="width: 800px; height: 500px; position: relative;">
  </div>
</div>
</div>

<div class="clear-floated"></div>

<script>
    var mymap = L.map('usmap', {
        ... 
        ... map parameters here...
        ...
    });

    L.marker([40.366,-105.56]).addTo(mymap)     // This is where I want to add/sub the markers for the 
                                                // map when a checkbox is checked/unchecked.
                                                // Need to loop through or just add/sub the new marker
</script>

复选框出现了，地图显示了一个标记（我硬编码，如上所示），所以这一切都很好。只是真的迷失了最好的前进方式。

标签： javascriptrubyajaxmodelruby-on-rails-6